/* =============================================================================
   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-btn-dark       charcoal SECONDARY button (same shape, gold label)
     .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-tabrow         free-standing squared tab strip for OPEN surfaces
     .wgf-secthead       section-header pill OBJECT (slate + parchment voices)
     .wgf-chip           squared mini-chip / tag (the rounded-pill replacement)
     .wgf-plate-row      Warband character plate row (ig-49), --selected = gold
     .wgf-dialog-banner  NPC dialog banner (ig-50); --notice = portrait-less
     .wgf-input          AH inset search field; --search = magnifier variant
     .wgf-dropdown       select standard; --native = CSS-only real <select> skin
     .wgf-slate-table    THE slate data table (well + colhead + rowstripe bound)
     .wgf-actionbar      the editor toolbar bar (ig-60): tab end caps + dark strip
     .wgf-slot           square action-bar slot (iconframe slices); keybind corner,
                         hover/down/active gold states, __flyout row above (ig-60)
     .wgf-keycap         keybind key plate (ig-59); --wide for word keys
     .wgf-keylegend      two-column keybind legend (ig-59): gold label, keycap right
     .wgf-tip            centered gold "Tip:" empty state; --overlay / --bare cuts
     .wgf-scroll         the thin dark in-game scrollbar for overflow containers
   ============================================================================= */

/* 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-btn-dark - the charcoal SECONDARY button (13-ingame-reference sec 1:
   "Secondary = same shape in dark charcoal with gold text", ig-14 Filter).
   Same geometry and yellow-gold Friz label as .wgf-btn-red; the plate is an
   honest flat charcoal gradient inside a thin metal bevel (no atlas member
   ships a charcoal button; flat tone is the kit's sanctioned fallback, per
   .wgf-plate-row). Hover = the same subtle brightness lift as every kit
   button, never a color swap. Use it for the second action beside a
   .wgf-btn-red primary (Filter, Reset, Cancel).

   Usage:
     <button class="wgf-btn-dark">Filter</button>
     <a class="wgf-btn-dark wgf-btn-dark--sm" href="...">Reset</a>
   --------------------------------------------------------------------------- */
.wgf-btn-dark {
  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: 1px solid var(--wgf-metal);
  border-radius: 0;
  background: linear-gradient(180deg, #3a3a3f, #232327);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -2px 4px rgba(0, 0, 0, 0.45);
  color: var(--wgf-gold);
  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-dark:hover { filter: brightness(1.12); }
.wgf-btn-dark:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wgf-btn-dark:active {
  transform: translateY(1px);
  filter: brightness(0.9);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.wgf-btn-dark[disabled],
.wgf-btn-dark.is-disabled {
  color: var(--wgf-gold-dim);
  cursor: default;
  pointer-events: none;
  filter: none;
  opacity: 0.75;
}
/* compact cut, the .wgf-btn-red--sm sibling */
.wgf-btn-dark.wgf-btn-dark--sm {
  height: 26px;
  min-width: 30px;
  padding: 0 var(--space-2);
  font-size: var(--text-xs);
}

/* -----------------------------------------------------------------------------
   .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-decoration: none;                           /* anchor tabs read like button tabs */
  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[aria-current="page"],
.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-tabrow - a free-standing squared tab strip for OPEN surfaces (the ig-38
   consequence: "filter/category selectors become tab rows"). The same .wgf-tab
   red-button tabs WITHOUT the window-plate seam .wgf-window__tabs carries, so
   a filter/mode row can sit on the page canvas rather than on a window edge.
   Tabs may be <button> (flip .is-active) or <a> (aria-current="page" reads as
   the active pressed state automatically).

   Usage:
     <nav class="wgf-tabrow" aria-label="Filter">
       <button class="wgf-tab is-active">All</button>
       <a class="wgf-tab" href="/dungeons/">Dungeons</a>
     </nav>
   --------------------------------------------------------------------------- */
.wgf-tabrow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-1);
}

/* -----------------------------------------------------------------------------
   .wgf-secthead - the section-header OBJECT (13-ingame-reference sec 1 + sec 3
   delta 2: "Section headers are objects, not typography"). An embossed dark
   pill sits centered INSIDE the content area carrying gold small-caps Friz
   ("Item Level", "Attributes", "Wealth" - ig-09). Slate voice by default; on
   the parchment surface it re-cuts automatically (or via --parchment) to the
   red-brown banner voice of ig-15. Built from flat token tone + bevel shadows,
   the same honest raised-plate language as .wgf-colhead__cell (no atlas member
   ships this pill).

   Usage:
     <h2 class="wgf-secthead">Attributes</h2>
     <h3 class="wgf-secthead wgf-secthead--parchment">Wealth</h3>
   --------------------------------------------------------------------------- */
.wgf-secthead {
  display: table;                          /* shrink-wrap + self-center on any parent */
  margin: 0 auto var(--space-3);
  padding: var(--space-1) var(--space-5);
  border: 1px solid var(--wgf-metal-soft);
  border-radius: 0;
  background: linear-gradient(180deg, var(--wgf-plate-hi), var(--wgf-plate));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -2px 4px rgba(0, 0, 0, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.4);
  color: var(--wgf-gold);
  font-family: var(--font-game);
  font-size: var(--text-sm);
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  line-height: 1.3;
  text-align: center;
  text-shadow: var(--text-ink-outline);
}
/* parchment family voice: red-brown text on a warm engraved band (ig-15) */
.wgf-secthead--parchment,
.wgf-canvas--parchment .wgf-secthead,
.wgf-parchment-pane .wgf-secthead {
  border-color: rgba(90, 60, 24, 0.55);
  background: linear-gradient(180deg, rgba(120, 84, 36, 0.16), rgba(90, 60, 24, 0.24));
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 220, 0.35),
    inset 0 -2px 4px rgba(60, 38, 12, 0.28);
  color: #7a3f10;
  text-shadow: none;
}

/* -----------------------------------------------------------------------------
   .wgf-chip - the squared mini-chip / tag (ig-38 sec 0.4: --radius-pill is
   dead as a container radius; the "Equipped" tab chip of ig-27/ig-40 is the
   model). A tiny charcoal plate with a thin bevel and gold small-caps label,
   far lighter than a .wgf-tab. Works as <span>, <a> or <button>; .is-selected
   is the gold-lit state for filter chips; interactive chips hover with the
   kit's brightness lift, never a color swap.

   Usage:
     <span class="wgf-chip">Equipped</span>
     <a class="wgf-chip" href="/guides/farming/">Farming</a>
     <button class="wgf-chip is-selected">Herbs</button>
   --------------------------------------------------------------------------- */
.wgf-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  box-sizing: border-box;
  padding: 2px var(--space-2);
  border: 1px solid var(--wgf-metal-soft);
  border-radius: 0;
  background: linear-gradient(180deg, var(--wgf-plate-hi), var(--wgf-plate));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  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;
  line-height: 1.4;
  text-decoration: none;
  text-shadow: var(--text-ink-outline);
}
a.wgf-chip,
button.wgf-chip {
  cursor: pointer;
  transition: filter var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}
a.wgf-chip:hover,
button.wgf-chip:hover { filter: brightness(1.15); color: var(--wgf-gold-bright); }
a.wgf-chip:focus-visible,
button.wgf-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wgf-chip.is-selected {
  border-color: var(--wgf-gold-dark);
  color: var(--wgf-gold-bright);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(var(--wgf-gold-rgb), 0.25);
}

/* -----------------------------------------------------------------------------
   .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;
}
/* Leading 36px icon slot for list rows (wave-2, housing/talent list rows): sits
   FIRST inside a .wgf-plate-row and seats either a .wgf-qborder quality frame
   (auto-scaled to 36px with its round icon at 26px) or a bare square <img>.
   No icon data yet? Leave the slot EMPTY - the dark inset well IS the honest
   empty-slot state (never a drawn placeholder).
   Usage:
     <div class="wgf-plate-row">
       <span class="wgf-plate-row__icon">
         <span class="wgf-qborder wgf-qborder--green"><img src="..." alt=""></span>
       </span>
       <div class="wgf-plate-row__body"> ... </div>
     </div> */
.wgf-plate-row__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  border: 1px solid var(--wgf-metal-soft);
  background: var(--wgf-well);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
}
.wgf-plate-row__icon > .wgf-qborder { width: 36px; height: 36px; }
.wgf-plate-row__icon > .wgf-qborder > img,
.wgf-plate-row__icon > .wgf-qborder .wgf-qborder__icon { width: 26px; height: 26px; }
.wgf-plate-row__icon > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

.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); }
/* Portrait-less SYSTEM NOTICE cut of the same idiom: omit the __portrait div
   and add --notice for even text padding. This is the sanctioned shape for
   tips/system messages with no speaker (the alternative is a quiet .wgf-well),
   never a stack of plain bordered boxes.
   Usage:  <aside class="wgf-dialog-banner wgf-dialog-banner--notice"> ... */
.wgf-dialog-banner--notice { padding-left: var(--space-4); }

/* =============================================================================
   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; }
/* Leading-magnifier variant (ig-12/17/26: every search well carries a magnifier
   glyph and a grey placeholder). The glyph is the site's ONE magnifier (the
   shell-search SVG) inlined as a CSS mask so it paints in a token color - no
   new art, no extra request, no emoji.
   Usage:  <div class="wgf-input wgf-input--search"><input type="search" ...></div> */
.wgf-input--search::before {
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-right: var(--space-2);
  background: var(--wgf-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='7' stroke='%23000' stroke-width='2'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='7' stroke='%23000' stroke-width='2'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* -----------------------------------------------------------------------------
   .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-dropdown--native - the CSS-only ADOPTION path for a real <select>
   (ig-51). The wrapper paints the exact 3-slice gold control + red-tab arrow;
   the native <select> sits inside transparent, so keyboard, screen-reader and
   mobile behavior stay fully native and the open menu is the browser's own
   (progressive enhancement, zero JS). Use this to re-cut live <select>s;
   reach for the full .wgf-dropdown listbox only where the page already ships
   menu-toggle JS.

   Usage:
     <label class="wgf-dropdown wgf-dropdown--native" aria-label="Realm">
       <select name="realm">
         <option>All Realms</option>
         <option>Area 52</option>
       </select>
     </label>
   --------------------------------------------------------------------------- */
.wgf-dropdown--native {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: var(--wgf-dropdown-h);
  min-width: 160px;
  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;
}
.wgf-dropdown--native > select {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 40px 0 12px;                 /* right pad clears the arrow */
  border: 0;
  background: transparent;
  color: var(--wgf-gold);
  font-family: var(--font-game);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
.wgf-dropdown--native > select:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* native menu rows keep the near-black panel voice where the engine honors it */
.wgf-dropdown--native > select option { background-color: #0c0c0f; color: var(--wgf-text); }
.wgf-dropdown--native > select[disabled] { color: var(--wgf-gold-dim); cursor: default; }
/* greyed arrow slice when the select is disabled (progressive: :has-capable
   browsers only; others keep the normal arrow over the dimmed label) */
.wgf-dropdown--native:has(> select[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);
}

/* -----------------------------------------------------------------------------
   .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-slate-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;
}
/* The frame art (auctionhouse-itemicon-border-*) is a ROUND metal ring, so the icon it
   seats must be round too - a square icon inside a round frame reads as a silver disc
   bleeding out from behind the icon (owner report, fixed 2026-08-02). Styles whatever
   image the frame wraps: the kit passes .wgf-qborder__icon, the AH rows pass an
   <img class="wgf-ah-fpicon"> straight in. */
.wgf-qborder__icon,
.wgf-qborder > img {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  margin: 0;
  border-radius: 50%;
  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-slate-table - THE slate data-table standard (ig-26/27, ig-63/64): one
   class that binds the kit pieces (well surface, colhead-tab header language,
   real rowstripe zebra) onto a real semantic <table>. Raised header cells with
   sort carets (.is-active + .is-asc/.is-desc on <th>), the blue selected/hover
   band of ig-26, numeric cells right-aligned (.is-num, tabular numerals). Item
   cells compose the existing pieces: .wgf-qborder icon + a name in its q-*
   quality token; prices use the coin components. Sit the table inside a
   .wgf-well; data stays semantic <table> markup, never divs.
   (assets/wgf-data-table.css .wgf-table is the PRE-reskin warm-stone table:
   migrate consumers here; do not restyle that legacy class.)

   Usage:
     <div class="wgf-well">
       <table class="wgf-slate-table">
         <thead><tr>
           <th class="is-num is-active is-desc">Price</th>
           <th>Name</th>
           <th class="is-num">Available</th>
         </tr></thead>
         <tbody>
           <tr><td class="is-num">...</td><td>...</td><td class="is-num">...</td></tr>
         </tbody>
       </table>
     </div>
   --------------------------------------------------------------------------- */
.wgf-slate-table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  color: var(--wgf-text);
  font-family: var(--font-game);
  font-size: var(--text-sm);
}
.wgf-slate-table th {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--wgf-metal-soft);
  border-bottom-color: var(--wgf-metal);
  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-align: left;
  text-shadow: var(--text-ink-outline);
  white-space: nowrap;
}
.wgf-slate-table th.is-num,
.wgf-slate-table td.is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.wgf-slate-table th.is-active { color: var(--wgf-gold-bright); }
/* sort caret: the .wgf-colhead affordance carried onto a th */
.wgf-slate-table th.is-active::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: var(--space-1);
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.wgf-slate-table th.is-active.is-desc::after { border-top: 5px solid var(--wgf-gold); }
.wgf-slate-table th.is-active.is-asc::after { border-bottom: 5px solid var(--wgf-gold); }
.wgf-slate-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid rgba(0, 0, 0, 0.55);
  vertical-align: middle;
}
/* real AH zebra slices (ig-15/ig-26 subtle alternating bands) */
.wgf-slate-table tbody tr:nth-child(odd) {
  background: url(/assets/ui/auctionhouse-rowstripe-1.png) left top / auto 100% repeat-x;
}
.wgf-slate-table tbody tr:nth-child(even) {
  background: url(/assets/ui/auctionhouse-rowstripe-2.png) left top / auto 100% repeat-x;
}
/* hover / selected = the blue-tinted band of ig-26 (selection color on dark
   tables; NOT the faction blue token, which is realm identity only) */
.wgf-slate-table tbody tr:hover { background: rgba(64, 116, 210, 0.16); }
.wgf-slate-table tbody tr.is-selected {
  background: rgba(64, 116, 210, 0.30);
  box-shadow:
    inset 0 1px 0 rgba(120, 165, 255, 0.35),
    inset 0 -1px 0 rgba(120, 165, 255, 0.35);
}

/* -----------------------------------------------------------------------------
   .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 HOUSING EDITOR FAMILY (wave 2; ig-59/ig-60). The housing editor's own
   chrome: the action-bar toolbar of square icon slots with keybind numerals
   (ig-60), the keybind legend of dark keycap plates (ig-59), the shared gold
   "Tip:" empty state, and the kit scrollbar. Every frame below is a real
   committed slice (ui-hud-actionbar-iconframe* / uiframe-tab-*) - no hand-drawn
   approximations, no AI art.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   .wgf-actionbar / .wgf-slot - the editor toolbar (ig-60). A dark strip with
   the uiframe-tab end caps carries a row of square action slots. Each slot is
   the client's OWN icon frame layered over the recessed empty-slot art:
     backdrop  ui-hud-actionbar-iconframe-slot.png  (dark wing-etched well)
     frame     ui-hud-actionbar-iconframe.png       (paints ABOVE the icon)
   States: default (grey frame) / :hover (gold mouseover frame) / :active and
   .is-down (pressed gold frame) / .is-active (the selected tool: gold-lit slot
   + pressed gold frame + glow, ig-60 slot 1) / .is-flash (red proc overlay).
   .wgf-slot__key is the keybind numeral riding the top-left corner, white
   condensed digits on dark (the client's own corner language).
   A slot with a flyout (ig-60: the two cube tools above slot 1) wraps slot +
   .wgf-slot__flyout in a .wgf-slot-anchor (buttons cannot nest); .is-open on
   the anchor shows the flyout row with its gold caret pointing down.

   Usage:
     <nav class="wgf-actionbar" role="toolbar" aria-label="Editor tools">
       <span class="wgf-slot-anchor is-open">
         <button class="wgf-slot is-active" aria-label="Select">
           <span class="wgf-slot__key">1</span>
           <img class="wgf-slot__icon" src="..." alt="">
         </button>
         <span class="wgf-slot__flyout">
           <button class="wgf-slot"><span class="wgf-slot__key">C</span>...</button>
           <button class="wgf-slot"><span class="wgf-slot__key">V</span>...</button>
         </span>
       </span>
       <button class="wgf-slot"><span class="wgf-slot__key">2</span>...</button>
       <span class="wgf-actionbar__sep"></span>
       <button class="wgf-slot wgf-slot--empty" aria-label="Empty slot"></button>
     </nav>
   --------------------------------------------------------------------------- */
.wgf-actionbar {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  box-sizing: border-box;
  height: 56px;
  /* padding == the rendered cap widths (35x36 / 37x36 tab slices at 56px bar
     height: left 54px, right 58px), the .wgf-btn-red cap rule: slots never sit
     on the cap art and the strip tiles only BETWEEN the caps. */
  padding: 0 58px 0 54px;
  background:
    url(/assets/ui/uiframe-tab-left.png) left center / auto 100% no-repeat border-box,
    url(/assets/ui/uiframe-tab-right.png) right center / auto 100% no-repeat border-box,
    linear-gradient(180deg, #23201a, #0c0a08) left center / 100% 46px no-repeat content-box;
}
/* the decorative post between slot groups (ig-60: tools | house button) */
.wgf-actionbar__sep {
  flex: 0 0 auto;
  width: 2px;
  height: 34px;
  margin: 0 var(--space-1);
  background: linear-gradient(180deg, var(--wgf-gold-dark), var(--wgf-gold-shadow));
}

.wgf-slot {
  position: relative;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 46px;                                     /* the slice's native 46x45 */
  height: 45px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url(/assets/ui/ui-hud-actionbar-iconframe-slot.png) center / 100% 100% no-repeat transparent;
  cursor: pointer;
}
/* the metal frame paints ABOVE the icon, exactly like the client draws it */
.wgf-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url(/assets/ui/ui-hud-actionbar-iconframe.png) center / 100% 100% no-repeat;
  pointer-events: none;
}
.wgf-slot:hover::after { background-image: url(/assets/ui/ui-hud-actionbar-iconframe-mouseover.png); }
.wgf-slot:active::after,
.wgf-slot.is-down::after { background-image: url(/assets/ui/ui-hud-actionbar-iconframe-down.png); }
.wgf-slot:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* the SELECTED tool (ig-60 slot 1): gold backlight behind the icon + the
   pressed gold frame with a soft glow - flat token gold, no invented art */
.wgf-slot.is-active {
  background:
    radial-gradient(circle at 50% 45%, rgba(var(--wgf-gold-rgb), 0.85) 0%, rgba(var(--wgf-gold-rgb), 0.25) 78%) center / 100% 100% no-repeat,
    url(/assets/ui/ui-hud-actionbar-iconframe-slot.png) center / 100% 100% no-repeat;
}
.wgf-slot.is-active::after {
  background-image: url(/assets/ui/ui-hud-actionbar-iconframe-down.png);
  filter: drop-shadow(0 0 4px rgba(var(--wgf-gold-rgb), 0.7));
}
/* proc flash overlay (the client's red pulse slice), above icon, below frame */
.wgf-slot.is-flash::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url(/assets/ui/ui-hud-actionbar-iconframe-flash.png) center / 100% 100% no-repeat;
  pointer-events: none;
}
.wgf-slot__icon {
  position: absolute;
  inset: 4px;                                      /* the frame lip is ~4px on the 46px slice */
  object-fit: cover;
  border-radius: 0;
}
.wgf-slot__key {
  position: absolute;
  top: 1px;
  left: 4px;
  z-index: 2;
  color: #fff;
  font-family: var(--font-game-numeric);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.2;
  text-shadow: var(--text-ink-outline);
  pointer-events: none;
}
/* the empty slot IS the honest empty state: backdrop + frame, no icon */
.wgf-slot--empty { cursor: default; }

/* flyout anchor: slot + flyout wrap (buttons cannot nest a flyout of buttons) */
.wgf-slot-anchor { position: relative; display: inline-flex; }
.wgf-slot__flyout {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: none;
  gap: var(--space-1);
}
.wgf-slot-anchor.is-open > .wgf-slot__flyout { display: inline-flex; }
/* the gold caret pointing down at the owning slot (ig-60) */
.wgf-slot__flyout::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid var(--wgf-gold);
}

/* -----------------------------------------------------------------------------
   .wgf-keycap / .wgf-keylegend - the keybind legend (ig-59). Each key is a
   small near-black plate inside a thin bronze bevel with a white Friz glyph;
   word keys ("Mouse Wheel Up", "Escape") take --wide. The legend lays label +
   key as a two-column grid: gold Friz label right-aligned, keycap on the
   right, generous row air (the ig-59 column rhythm). Flat token tone + bevel
   shadows (no atlas member ships a keycap - same honest-plate sanction as
   .wgf-secthead).

   Usage:
     <div class="wgf-keylegend">
       <span class="wgf-keylegend__label">Rotate Left</span>
       <kbd class="wgf-keycap wgf-keycap--wide">Mouse Wheel Up</kbd>
       <span class="wgf-keylegend__label">Remove Decor</span>
       <kbd class="wgf-keycap">R</kbd>
     </div>
   --------------------------------------------------------------------------- */
.wgf-keycap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 28px;
  height: 28px;
  padding: 0 var(--space-2);
  border: 1px solid var(--wgf-gold-muted);         /* the bronze bevel line */
  border-radius: var(--radius-control);
  background: linear-gradient(180deg, #24201a, #0e0c09);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.85),           /* dark seam inside the bevel */
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.5);
  color: #fff;
  font-family: var(--font-game);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-shadow: var(--text-ink-outline);
}
.wgf-keycap--wide { min-width: 64px; padding: 0 var(--space-3); }

.wgf-keylegend {
  display: grid;
  grid-template-columns: 1fr max-content;
  align-items: center;
  column-gap: var(--space-3);
  row-gap: var(--space-3);
}
.wgf-keylegend__label {
  color: var(--wgf-gold);
  font-family: var(--font-game);
  font-size: var(--text-md);
  font-weight: 700;
  text-align: right;
  text-shadow: var(--text-ink-outline);
}
.wgf-keylegend > .wgf-keycap { justify-self: start; }

/* -----------------------------------------------------------------------------
   .wgf-tip - THE shared "Tip:" empty state (13-ingame-reference sec 1: empty
   states speak in the loading-screen Tip idiom). Centered bright-gold Friz
   with the "Tip: " prefix baked in as a ::before, the exact voice of
   wgf-loadscreen.css .wgf-loadscreen-tip promoted to one kit home (the forks
   in wgf-game-skin / ah-deals / wgf-states migrate here).
     --overlay  absolute-centered over a positioned stage (the empty canvas)
     --bare     no "Tip: " prefix, for verbatim copy that must stand alone

   Usage:
     <p class="wgf-tip">Search for decor, then click a row to arm placement.</p>
     <div class="wgf-tip wgf-tip--overlay">Place your first decor item.</div>
   --------------------------------------------------------------------------- */
.wgf-tip {
  margin: 0;
  padding: var(--space-4) var(--space-3);
  color: var(--wgf-gold-bright);
  font-family: var(--font-game);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.5;
  text-align: center;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9), 0 0 12px rgba(var(--wgf-gold-rgb), 0.2);
}
.wgf-tip::before { content: "Tip: "; }
.wgf-tip--overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.wgf-tip--bare::before { content: none; }

/* -----------------------------------------------------------------------------
   .wgf-scroll - the thin dark in-game scrollbar for any overflow container
   (long decor lists, table shells). PROMOTED from assets/ah/base.css (complaint
   A, owner 2026-07-04) with the exact same values, so pages that load both
   files agree; the ah/base.css copy is the page-scoped twin pending migration.
   Firefox: scrollbar-color/width; WebKit/Blink: the ::-webkit-scrollbar family.

   Usage:  <div class="wgf-well wgf-scroll" style="max-height:320px"> ... </div>
   --------------------------------------------------------------------------- */
.wgf-scroll {
  scrollbar-width: thin;
  scrollbar-color: #8b7236 #0d0d08;
}
.wgf-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.wgf-scroll::-webkit-scrollbar-track { background: #0d0d08; }
.wgf-scroll::-webkit-scrollbar-thumb { background: #8b7236; border-radius: 0; }
.wgf-scroll::-webkit-scrollbar-thumb:hover { background: #a08040; }
.wgf-scroll::-webkit-scrollbar-corner { background: #0d0d08; }

/* =============================================================================
   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;
}

/* -----------------------------------------------------------------------------
   reduced-motion (docs/ui-ux/04-*: every animation/transition must respect
   prefers-reduced-motion; same approach as assets/ah-game-ui.css) - neutralize
   the filter/color/opacity transitions on every animated control in this kit.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wgf-btn-red { transition: none; }
  .wgf-btn-dark { transition: none; }
  .wgf-iconbtn { transition: none; }
  .wgf-window__x { transition: none; }
  .wgf-tab { transition: none; }
  .wgf-dialog-banner__x { transition: none; }
  .wgf-favbtn { transition: none; }
  a.wgf-chip, button.wgf-chip { transition: none; }
}

/* -----------------------------------------------------------------------------
   Narrow-viewport plate economy (talents recon, wave 2): the 24px window-body
   padding costs 48px of a ~360px phone screen. Under 640px the plate keeps a
   12px inset - still a visible carve, half the tax. Kit-level so every window
   on every page benefits; no per-page forks.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .wgf-window__body { padding: 12px; }
}