/* ah/ingame.css - the Auction House window wears the in-game client frame, 1:1 (2026-11-11).

   PORT of wowauctionhouse.com's proven frame (C:\Code_gaming_seo\wowauctionhouse
   static/css/wah-ingame.css sections 1, 2, 4). That file was written to sit on top of this
   site's own skin (ah/base.css, wgf-chrome.css), so the port is mechanical: same rules, the
   textures read from /assets/ui/, and the scope is :is(#ahApp, .fah-window).wah-ig so one file
   covers the retail window (#ahApp) and the server-rendered Forever window (.fah-window).
   Re-port with the snippet in docs/ui-ux/19-ah-ingame-frame.md; site-only rules live in the
   last block ("thewowdb only"). Loaded after every other sheet by the page that wants it.

   Geometry is Blizzard's own (Blizzard_AuctionHouseUI FrameXML, retail 12.x):
     AuctionHouseFrame 800x538 (PortraitFrameTemplate) - SearchBar 618x40 - CategoriesList
     168x438 - rows 20 tall, headers 19 tall - MoneyFrameBorder 158x19 - tabs under the frame.
   One client unit = var(--u) CSS px (1.4 on desktop). Every image is a client texture. */

.wah-ig {
  --u: 1.4px;
  --ig-gold: #ffd100;          /* NORMAL_FONT_COLOR */
  --ig-white: #ffffff;         /* HIGHLIGHT_FONT_COLOR */
  --ig-grey: #808080;          /* DISABLED_FONT_COLOR */
  --ig-shadow: 1px 1px 0 #000;
  --ig-friz: 'FrizQuadrata', 'Cinzel', 'Palatino Linotype', serif;
  --ig-num: 'ArialNarrowWoW', 'Arial Narrow', 'Roboto Condensed', Arial, sans-serif;
  --ig-cat-w: calc(168 * var(--u));
  --ig-img: url(/assets/ui/);
}

/* ======================================================================================
   1. The frame: metal edges from wgf-chrome's .wgf-window, the portrait corner, rock body.
   ====================================================================================== */
.wgf-tool-panel--ah:has(> :is(#ahApp, .fah-window).wah-ig) { padding: 0; background: none; border: 0; box-shadow: none; }

:is(#ahApp, .fah-window).wah-ig,
.wah-ig.wah-item {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: calc(800 * var(--u));
  margin: 18px auto calc(40 * var(--u));
  border: 0;
  border-radius: 0;
  /* PortraitFrameTemplate body: UI-Background-Rock under the frame's dark wash */
  background:
    linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .55)),
    url(/assets/ui/blizzard/background-rock.png) left top / 256px 256px repeat,
    #1a1714;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .75);
  color: var(--ig-white);
  font-family: var(--ig-friz);
}
/* the portrait corner replaces the plain top-left metal corner */
:is(#ahApp, .fah-window).wah-ig::before,
.wah-ig.wah-item::before {
  z-index: 3;
  /* THE RING OVERHANGS THE FRAME (owner 2026-11-11: "it cut off the circle"). In the client the
     portrait ring pokes out past the frame's top-left corner; with the overlay at inset 0 the
     ring's outer 10px (left) and 16px (top) were clipped flat by the overlay's own box. So the
     overlay grows by exactly that much up and left, and every layer anchored to those two
     sides moves back by the same amount (border-top 30 -> 46 keeps the side edges where they
     were). Net: nothing moves, the ring is whole. */
  inset: -16px 0 0 -10px;
  background:
    url(/assets/ui/ui-frame-portraitmetal-cornertopleft-2x.png) left -11px top -10px / 120px 120px no-repeat,
    url(/assets/ui/ui-frame-metal-cornertopright-2x.png)        right -9px top -10px / 120px 120px no-repeat,
    url(/assets/ui/ui-frame-metal-cornerbottomleft-2x.png)      left -9px bottom -7px / 51.2px 51.2px no-repeat,
    url(/assets/ui/ui-frame-metal-cornerbottomright-2x.png)     right -9px bottom -7px / 51.2px 51.2px no-repeat,
    url("/assets/ui/!ui-frame-metal-edgeleft-2x.png")           left -9px top 0 / 120px 25.6px repeat-y,
    url("/assets/ui/!ui-frame-metal-edgeright-2x.png")          right -9px top 0 / 120px 25.6px repeat-y;
  background-clip: border-box, border-box, border-box, border-box, padding-box, padding-box;
  background-origin: border-box;
  border-style: solid;
  border-color: transparent;
  border-width: 46px 0 30px 0;
}
:is(#ahApp, .fah-window).wah-ig::after, .wah-ig.wah-item::after { z-index: 3; }

/* The round portrait, under the metal ring. The ring is the ::before corner texture drawn at a
   FIXED 120px (0.8 of its 150px atlas) at left -21px / top -26px; its hole is centred at atlas
   (78,80) with an inner radius of 48, i.e. (41.4px, 38px) r 38.4px in the frame. So the portrait
   uses the same fixed pixels (not --u), an 80px circle tucked just under the ring's inner edge.
   Scaling it with --u is what pushed the goblin past the ring at desktop sizes (2026-10-12). */
.wah-ig-portrait {
  position: absolute;
  z-index: 2;
  /* measured on the texture 2026-11-11: hole x 31..127, y 30..126 of 150, drawn at 0.8 from
     (-21,-26) => hole centre (42.2px, 36.4px), radius 38.4px. An 80px disc centred there. */
  left: 2.2px;
  top: -3.6px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  background: #000;
  pointer-events: none;
}
/* zoomed + nudged so the achievement icon's own green border never shows inside the ring */
.wah-ig-portrait img { display: block; width: 100%; height: 100%; transform: scale(1.6) translateX(-5%); }

/* Close button: UIPanelCloseButton (RedButton-Exit), TOPRIGHT of the frame. */
.wah-ig-close {
  position: absolute;
  z-index: 4;
  top: calc(1 * var(--u));
  right: calc(1 * var(--u));
  width: calc(23 * var(--u));
  height: calc(23 * var(--u));
  background: url(/assets/ui/128-redbutton-exit.png) center / contain no-repeat;
}
.wah-ig-close:hover { background-image: url(/assets/ui/128-redbutton-exit-highlight.png), url(/assets/ui/128-redbutton-exit.png); background-size: contain; }
.wah-ig-close:active { background-image: url(/assets/ui/128-redbutton-exit-pressed.png); }
.wah-ig-close:focus-visible { outline: 2px solid var(--ig-gold); outline-offset: 1px; border-radius: 4px; }

/* Title: GameFontNormal gold, centred on the top rail. */
:is(#ahApp, .fah-window).wah-ig > .wgf-window__title,
.wah-ig.wah-item > .wgf-window__title {
  z-index: 4;
  height: calc(23 * var(--u));
  min-height: 0;
  padding: 0;
  border-inline-width: calc(60 * var(--u)) calc(30 * var(--u));
  font-family: var(--ig-friz);
  font-size: calc(12 * var(--u));
  font-weight: 400;
  font-variant: normal;
  letter-spacing: 0;
  color: var(--ig-gold);
  text-shadow: var(--ig-shadow);
  text-transform: none;
}

/* ======================================================================================
   2. Browse window layout (desktop): fixed 538-unit frame, lists scroll inside it.
   ====================================================================================== */
:is(#ahApp, .fah-window).wah-ig {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: calc(23 * var(--u)) calc(50 * var(--u)) minmax(0, 1fr) calc(27 * var(--u));
  height: calc(538 * var(--u));
  /* bottom padding lifts the status row off the metal bottom rail (it sat on the rail and
     the active tab rode up into the Verified box, 2026-11-10) */
  padding: 0 calc(4 * var(--u)) calc(7 * var(--u)) calc(4 * var(--u));
}
:is(#ahApp, .fah-window).wah-ig > .ah-toolbar,
:is(#ahApp, .fah-window).wah-ig > .ah-layout,
:is(#ahApp, .fah-window).wah-ig > .ah-statusbar { position: relative; z-index: 1; }

/* --- search bar row ---------------------------------------------------------------- */
:is(#ahApp, .fah-window).wah-ig .ah-toolbar {
  display: grid;
  grid-template-columns: minmax(calc(108 * var(--u)), auto) minmax(0, 1fr) auto auto auto calc(132 * var(--u));
  gap: calc(10 * var(--u));
  align-items: center;
  margin: 0;
  padding: calc(6 * var(--u)) calc(8 * var(--u)) 0 calc(60 * var(--u));
  background: none;
  border: 0;
}
:is(#ahApp, .fah-window).wah-ig .ah-realm-wrap { gap: 0; }
/* Forever US | EU switch: the realm column grows to fit it instead of spilling over the search box */
:is(#ahApp, .fah-window).wah-ig .ah-realm-wrap { display: flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; }
:is(#ahApp, .fah-window).wah-ig .wah-region-switch .ah-control {
  display: inline-flex; align-items: center; width: auto;
  margin: calc(4 * var(--u)) 0; padding: 0 calc(8 * var(--u));
  background-image: none; text-decoration: none;
}
:is(#ahApp, .fah-window).wah-ig #ahRegionDisplay { display: none; }

/* WowStyle1FilterDropdownTemplate (common-dropdown-b-button) for every secondary control:
   realm, sort, Market Share, Export. Background sits 4 units outside the button. */
:is(#ahApp, .fah-window).wah-ig .ah-control,
:is(#ahApp, .fah-window).wah-ig .ah-filter-button,
.wah-ig .wah-ig-dd {
  box-sizing: border-box;
  height: calc(18 * var(--u));
  margin: calc(4 * var(--u));
  padding: 0 calc(22 * var(--u)) 0 calc(10 * var(--u));
  border-style: solid;
  border-color: transparent;
  border-width: 0;
  border-radius: 0;
  border-image: url(/assets/ui/common-dropdown-b-button.png) 4 12 fill / calc(4 * var(--u)) calc(12 * var(--u)) / calc(4 * var(--u));
  background: url(/assets/ui/common-dropdown-icon-next.png) right calc(4 * var(--u)) center / calc(13 * var(--u)) auto no-repeat;
  box-shadow: none;
  color: var(--ig-gold);
  font-family: var(--ig-friz);
  font-size: calc(11 * var(--u));
  font-weight: 400;
  line-height: calc(18 * var(--u));
  letter-spacing: 0;
  text-transform: none;
  font-variant: normal;
  text-shadow: var(--ig-shadow);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
:is(#ahApp, .fah-window).wah-ig .ah-filter-button::first-letter { color: inherit; }
:is(#ahApp, .fah-window).wah-ig .ah-filter-button .wgf-ah-icon16 { display: none; }
:is(#ahApp, .fah-window).wah-ig .ah-control:hover,
:is(#ahApp, .fah-window).wah-ig .ah-filter-button:hover,
.wah-ig .wah-ig-dd:hover { border-image-source: url(/assets/ui/common-dropdown-b-button-hover.png); color: var(--ig-white); }
:is(#ahApp, .fah-window).wah-ig .ah-control:active,
:is(#ahApp, .fah-window).wah-ig .ah-filter-button:active,
.wah-ig .wah-ig-dd:active { border-image-source: url(/assets/ui/common-dropdown-b-button-pressed.png); }
:is(#ahApp, .fah-window).wah-ig .ah-sort-select option { background: #111; color: #fff; font-family: var(--ig-friz); }
:is(#ahApp, .fah-window).wah-ig .wah-realm-btn { width: 100%; min-width: 0; }
:is(#ahApp, .fah-window).wah-ig .wah-house { padding: 0 calc(10 * var(--u)); margin-right: calc(2 * var(--u)); opacity: .75; background-image: none; }
:is(#ahApp, .fah-window).wah-ig .wah-house.is-on { opacity: 1; box-shadow: none; color: var(--ig-white); border-image-source: url(/assets/ui/common-dropdown-b-button-pressed.png); }

/* SearchBoxTemplate: common-search-border 3-slice + magnifying glass. */
:is(#ahApp, .fah-window).wah-ig .ah-searchbox {
  position: relative;
  box-sizing: border-box;
  height: calc(22 * var(--u));
  padding: 0 calc(20 * var(--u)) 0 calc(20 * var(--u));
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background:
    url(/assets/ui/common-search-magnifyingglass.png) left calc(5 * var(--u)) center / calc(12 * var(--u)) auto no-repeat,
    url(/assets/ui/common-search-border-left.png) left center / auto 100% no-repeat,
    url(/assets/ui/common-search-border-right.png) right center / auto 100% no-repeat,
    url(/assets/ui/common-search-border-middle.png) center / calc(100% - 14 * var(--u)) 100% no-repeat;
}
:is(#ahApp, .fah-window).wah-ig .ah-searchbox > span[aria-hidden] { display: none; }
:is(#ahApp, .fah-window).wah-ig .ah-searchbox input {
  font-family: var(--ig-friz);
  font-size: calc(11 * var(--u));
  color: var(--ig-white);
  background: transparent;
}
:is(#ahApp, .fah-window).wah-ig .ah-searchbox input::placeholder { color: var(--ig-grey); opacity: 1; }
:is(#ahApp, .fah-window).wah-ig .ah-searchbox:focus-within { outline: 1px solid rgba(255, 209, 0, .55); outline-offset: -3px; }

/* UIPanelButtonTemplate, red: 128-RedButton left / center / right, 22 units tall. */
:is(#ahApp, .fah-window).wah-ig .ah-search-button,
.wah-ig .wah-ig-redbtn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(22 * var(--u));
  min-width: calc(80 * var(--u));
  padding: 0 calc(14 * var(--u));
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background:
    url(/assets/ui/128-redbutton-left.png) left center / auto 100% no-repeat,
    url(/assets/ui/128-redbutton-right.png) right center / auto 100% no-repeat,
    url(/assets/ui/_128-redbutton-center.png) left center / auto 100% repeat-x;
  color: var(--ig-gold);
  font-family: var(--ig-friz);
  font-size: calc(12 * var(--u));
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-variant: normal;
  text-shadow: var(--ig-shadow);
  text-decoration: none;
  cursor: pointer;
}
:is(#ahApp, .fah-window).wah-ig .ah-search-button:hover,
.wah-ig .wah-ig-redbtn:hover { color: var(--ig-white); filter: brightness(1.12); text-decoration: none; }
:is(#ahApp, .fah-window).wah-ig .ah-search-button:active,
.wah-ig .wah-ig-redbtn:active {
  background-image: url(/assets/ui/128-redbutton-left-pressed.png), url(/assets/ui/128-redbutton-right-pressed.png), url(/assets/ui/_128-redbutton-center-pressed.png);
}
:is(#ahApp, .fah-window).wah-ig :is(button, a, select, input):focus-visible,
.wah-ig :is(button, a, select):focus-visible { outline: 2px solid var(--ig-gold); outline-offset: 1px; }

/* --- body: categories | results ------------------------------------------------------ */
:is(#ahApp, .fah-window).wah-ig .ah-layout {
  display: grid;
  grid-template-columns: var(--ig-cat-w) minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  background: none;
  border: 0;
}

/* InsetFrameTemplate: the client's nine-slice inset over UI-Background-Marble */
.wah-ig .wah-ig-inset,
:is(#ahApp, .fah-window).wah-ig .ah-sidebar,
:is(#ahApp, .fah-window).wah-ig .ah-table-shell {
  box-sizing: border-box;
  border: calc(6 * var(--u)) solid transparent;
  border-image: url(/assets/ui/insetframe-9slice.png) 8 / calc(6 * var(--u)) round;
  border-radius: 0;
  box-shadow: none;
}

/* CategoriesList: auctionhouse-background-categories, MinimalScrollBar in its right lane */
:is(#ahApp, .fah-window).wah-ig .ah-sidebar {
  position: relative;
  top: auto;
  max-height: none;
  height: 100%;
  margin: 0;
  padding: calc(1 * var(--u)) calc(6 * var(--u)) calc(2 * var(--u)) calc(1 * var(--u));
  overflow-y: auto;
  background:
    url(/assets/ui/auctionhouse-background-categories.png) left top / calc(138 * var(--u)) 100% no-repeat,
    url(/assets/ui/blizzard/background-marble.png) left top / 256px repeat,
    #0b0a09;
  border-right-width: calc(6 * var(--u));
}
:is(#ahApp, .fah-window).wah-ig .ah-sidebar-head { display: none; }
:is(#ahApp, .fah-window).wah-ig .ah-category-tree { display: block; padding: 0; margin: 0; }
:is(#ahApp, .fah-window).wah-ig .ah-cat-children { margin: 0; padding: 0; border: 0; background: none; }

/* AuctionCategoryButtonTemplate: 132x21. Top level = auctionhouse-nav-button, sub levels
   = auctionhouse-nav-button-secondary, third level = plain text + the tertiary filter line. */
:is(#ahApp, .fah-window).wah-ig .ah-cat-row {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: calc(132 * var(--u));
  height: calc(21 * var(--u));
  min-height: 0;
  margin: 0 0 calc(4 * var(--u)) calc(2 * var(--u));
  padding: 0 calc(4 * var(--u)) 0 calc(6 * var(--u)) !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: url(/assets/ui/auctionhouse-nav-button.png) calc(-2 * var(--u)) 0 / calc(100% * 136 / 132) calc(32 * var(--u)) no-repeat;
  color: var(--ig-gold);
  font-family: var(--ig-friz);
  font-size: calc(10 * var(--u));
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  text-align: left;
  text-shadow: var(--ig-shadow);
  text-transform: none;
  cursor: pointer;
}
:is(#ahApp, .fah-window).wah-ig .ah-cat-row .ah-cat-caret { display: none; }
:is(#ahApp, .fah-window).wah-ig .ah-cat-row .ah-cat-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(#ahApp, .fah-window).wah-ig .ah-cat-row[data-depth="1"] {
  width: calc(122 * var(--u));
  margin-left: calc(12 * var(--u));
  padding-left: calc(6 * var(--u)) !important;
  background-image: url(/assets/ui/auctionhouse-nav-button-secondary.png);
  /* the secondary atlas has ~9.5 units of transparent margin on its left: shift it out so the
     visible button starts at the row's left edge (it read as clipped + off-centre, 2026-11-10) */
  background-position: calc(-9.5 * var(--u)) 0;
  background-size: calc(133 * var(--u)) calc(32 * var(--u));
  color: var(--ig-white);
}
:is(#ahApp, .fah-window).wah-ig .ah-cat-row[data-depth="2"],
:is(#ahApp, .fah-window).wah-ig .ah-cat-row[data-depth="3"] {
  width: calc(112 * var(--u));
  margin-left: calc(22 * var(--u));
  margin-bottom: 0;
  padding-left: calc(10 * var(--u)) !important;
  background: url(/assets/ui/auctionhouse-nav-button-tertiary-filterline.png) 0 calc(2 * var(--u)) / calc(5 * var(--u)) calc(11 * var(--u)) no-repeat;
  color: var(--ig-white);
}
:is(#ahApp, .fah-window).wah-ig .ah-cat-row:hover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(/assets/ui/auctionhouse-nav-button-highlight.png) center / 100% 100% no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
}
:is(#ahApp, .fah-window).wah-ig .ah-cat-row[data-depth="2"]:hover::after,
:is(#ahApp, .fah-window).wah-ig .ah-cat-row[data-depth="3"]:hover::after { background: rgba(255, 255, 255, .08); mix-blend-mode: normal; }
:is(#ahApp, .fah-window).wah-ig .ah-cat-row:hover { color: var(--ig-white); }
:is(#ahApp, .fah-window).wah-ig .ah-cat-row.active,
:is(#ahApp, .fah-window).wah-ig .ah-cat-row[aria-current],
:is(#ahApp, .fah-window).wah-ig .ah-cat-row.is-active { color: var(--ig-white); }
:is(#ahApp, .fah-window).wah-ig .ah-cat-row.active::before,
:is(#ahApp, .fah-window).wah-ig .ah-cat-row.is-active::before,
:is(#ahApp, .fah-window).wah-ig .ah-cat-row:has(+ .ah-cat-children:not([hidden]))::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(/assets/ui/auctionhouse-nav-button-select.png) center / 100% 100% no-repeat;
  pointer-events: none;
}
:is(#ahApp, .fah-window).wah-ig .ah-cat-row:has(+ .ah-cat-children:not([hidden])) { color: var(--ig-white); }
:is(#ahApp, .fah-window).wah-ig .ah-cat-row[data-depth="1"]:is(.active, :has(+ .ah-cat-children:not([hidden])))::before { background-image: url(/assets/ui/auctionhouse-nav-button-secondary-select.png); }
:is(#ahApp, .fah-window).wah-ig .ah-cat-row[data-depth="2"].active::before,
:is(#ahApp, .fah-window).wah-ig .ah-cat-row[data-depth="3"].active::before { background: none; }
:is(#ahApp, .fah-window).wah-ig .ah-cat-row[data-depth="2"].active,
:is(#ahApp, .fah-window).wah-ig .ah-cat-row[data-depth="3"].active { color: var(--ig-gold); }
:is(#ahApp, .fah-window).wah-ig .ah-cat-row--all-items { margin-top: calc(4 * var(--u)); }
:is(#ahApp, .fah-window).wah-ig .ah-cat-row.token { color: #00ccff; }
:is(#ahApp, .fah-window).wah-ig .ah-cat-row.utility { color: #1eff00; }
:is(#ahApp, .fah-window).wah-ig .ah-loading { color: var(--ig-gold); font-size: calc(10 * var(--u)); padding: calc(6 * var(--u)); }

/* --- results (AuctionHouseItemListTemplate) ------------------------------------------ */
:is(#ahApp, .fah-window).wah-ig .ah-main { min-height: 0; margin: 0 0 0 calc(4 * var(--u)); background: none; border: 0; }
:is(#ahApp, .fah-window).wah-ig .ah-browse-view { height: 100%; }
:is(#ahApp, .fah-window).wah-ig .ah-table-shell {
  height: 100%;
  max-height: none;
  overflow-y: auto;
  padding: 0;
  background:
    url(/assets/ui/auctionhouse-background-index.png) 0 calc(19 * var(--u)) / 100% calc(100% - 19 * var(--u)) no-repeat,
    #0c0b0a;
}
:is(#ahApp, .fah-window).wah-ig .ah-state-bar {
  padding: calc(3 * var(--u)) calc(6 * var(--u));
  background: rgba(0, 0, 0, .45);
  border: 0;
  font-family: var(--ig-friz);
}
:is(#ahApp, .fah-window).wah-ig .ah-state-realm { color: var(--ig-gold); font-size: calc(10 * var(--u)); font-weight: 400; letter-spacing: 0; }
:is(#ahApp, .fah-window).wah-ig .ah-state-chip {
  border: 0; border-radius: 0; background: rgba(255, 255, 255, .06);
  color: var(--ig-white); font-size: calc(10 * var(--u)); font-family: var(--ig-friz);
}
:is(#ahApp, .fah-window).wah-ig .ah-results-context {
  padding: calc(6 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u));
  background: none;
  border: 0;
}
:is(#ahApp, .fah-window).wah-ig .ah-results-context h2 {
  margin: 0;
  color: var(--ig-gold);
  font-family: var(--ig-friz);
  font-size: calc(12 * var(--u));
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  text-shadow: var(--ig-shadow);
}
:is(#ahApp, .fah-window).wah-ig .ah-results-context .ah-results-meta { color: #b9b9b9; font-size: calc(9.5 * var(--u)); font-family: var(--ig-friz); }

:is(#ahApp, .fah-window).wah-ig .ah-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  background: none;
  font-family: var(--ig-friz);
}
/* column headers: ColumnDisplayButtonShortTemplate (WhoFrame-ColumnTabs), 19 units, 2 overlap */
:is(#ahApp, .fah-window).wah-ig .ah-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: calc(19 * var(--u));
  padding: 0 calc(8 * var(--u));
  border: 0;
  background:
    url(/assets/ui/whoframe-columntab-left.png) left top / calc(5 * var(--u)) 100% no-repeat,
    url(/assets/ui/whoframe-columntab-right.png) right top / calc(4 * var(--u)) 100% no-repeat,
    url(/assets/ui/whoframe-columntab-middle.png) left top / 100% 100% no-repeat,
    #0c0b0a;
  background-clip: border-box;
  color: var(--ig-white);
  font-family: var(--ig-friz);
  font-size: calc(10 * var(--u));
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-variant: normal;
  text-align: left;
  text-shadow: var(--ig-shadow);
  white-space: nowrap;
  box-shadow: none;
}
:is(#ahApp, .fah-window).wah-ig .ah-table thead th.ah-sortable { cursor: pointer; }
:is(#ahApp, .fah-window).wah-ig .ah-table thead th.ah-sortable:hover {
  background-image:
    url(/assets/ui/ui-character-tab-highlight.png),
    url(/assets/ui/whoframe-columntab-left.png),
    url(/assets/ui/whoframe-columntab-right.png),
    url(/assets/ui/whoframe-columntab-middle.png);
  background-size: 100% 100%, calc(5 * var(--u)) 100%, calc(4 * var(--u)) 100%, 100% 100%;
  background-position: center, left top, right top, left top;
  background-repeat: no-repeat;
  background-blend-mode: screen, normal, normal, normal;
}
/* sort arrow: auctionhouse-ui-sortarrow (points down = descending; flipped for ascending) */
:is(#ahApp, .fah-window).wah-ig .ah-table .sort-arrow {
  display: inline-block;
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  margin-left: calc(3 * var(--u));
  vertical-align: middle;
  font-size: 0;
  color: transparent;
}
:is(#ahApp, .fah-window).wah-ig .ah-table th.is-sorted .sort-arrow { background: url(/assets/ui/auctionhouse-ui-sortarrow.png) center / contain no-repeat; }
:is(#ahApp, .fah-window).wah-ig .ah-table th.is-asc .sort-arrow { transform: scaleY(-1); }
:is(#ahApp, .fah-window).wah-ig .ah-table th.col-price { width: calc(118 * var(--u)); }
:is(#ahApp, .fah-window).wah-ig .ah-table th.col-type { width: calc(55 * var(--u)); }
:is(#ahApp, .fah-window).wah-ig .ah-table th.col-qty { width: calc(83 * var(--u)); }
:is(#ahApp, .fah-window).wah-ig .ah-table th.col-market { width: calc(110 * var(--u)); }
:is(#ahApp, .fah-window).wah-ig .ah-table th.col-fav { width: calc(29 * var(--u)); }
:is(#ahApp, .fah-window).wah-ig .ah-table th.col-price,
:is(#ahApp, .fah-window).wah-ig .ah-table th.col-market { text-align: right; }

/* rows: 20 units, auctionhouse-rowstripe-1 / -2, row-highlight on hover (ADD) */
:is(#ahApp, .fah-window).wah-ig .ah-table tbody tr {
  height: calc(20 * var(--u));
  background: url(/assets/ui/auctionhouse-rowstripe-1.png) 0 0 / 100% 100%;
  border: 0;
  cursor: pointer;
}
:is(#ahApp, .fah-window).wah-ig .ah-table tbody tr:nth-child(even) { background-image: url(/assets/ui/auctionhouse-rowstripe-2.png); }
:is(#ahApp, .fah-window).wah-ig .ah-table tbody tr:hover,
:is(#ahApp, .fah-window).wah-ig .ah-table tbody tr:focus-within {
  background-image: url(/assets/ui/auctionhouse-ui-row-highlight.png), url(/assets/ui/auctionhouse-rowstripe-1.png);
  background-size: 100% 100%;
  background-blend-mode: screen;
}
:is(#ahApp, .fah-window).wah-ig .ah-table tbody tr.selected,
:is(#ahApp, .fah-window).wah-ig .ah-table tbody tr.is-selected { background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(/assets/ui/auctionhouse-ui-row-select.png); background-size: 100% 100%; }
:is(#ahApp, .fah-window).wah-ig .ah-table td {
  height: calc(20 * var(--u));
  padding: 0 calc(8 * var(--u));
  border: 0;
  background: none;
  color: var(--ig-white);
  font-size: calc(12 * var(--u));
  line-height: 1;
  text-shadow: var(--ig-shadow);
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:is(#ahApp, .fah-window).wah-ig .ah-table td.price-cell,
:is(#ahApp, .fah-window).wah-ig .ah-table td.market-cell { text-align: right; font-family: var(--ig-num); font-size: calc(13 * var(--u)); }
:is(#ahApp, .fah-window).wah-ig .ah-table td.col-type,
:is(#ahApp, .fah-window).wah-ig .ah-table td.qty-cell { font-family: var(--ig-num); font-size: calc(13 * var(--u)); }
:is(#ahApp, .fah-window).wah-ig .ah-table td.market-cell { color: #c8c8c8; }
/* the client's Available column is the bare quantity; the listing count lives on the item page */
:is(#ahApp, .fah-window).wah-ig .ah-table .ah-subtext { display: none; }
:is(#ahApp, .fah-window).wah-ig .ah-item-cell { display: flex; align-items: center; min-width: 0; }
:is(#ahApp, .fah-window).wah-ig .ah-item-link {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--ig-friz);
  font-size: calc(12 * var(--u));
  font-weight: 400;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:is(#ahApp, .fah-window).wah-ig .ah-item-link:hover { text-decoration: none; }
/* AuctionHouseTableCellItemDisplayTemplate icon: 14x14 inside auctionhouse-itemicon-small-border */
:is(#ahApp, .fah-window).wah-ig .ah-item-link .wgf-ah-fpicon,
:is(#ahApp, .fah-window).wah-ig .ah-item-link img {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  margin: 0 calc(7 * var(--u)) 0 calc(1 * var(--u));
  padding: calc(1 * var(--u));
  border: 0;
  border-radius: 0;
  background: url(/assets/ui/auctionhouse-itemicon-small-border.png) center / 100% 100% no-repeat;
  box-shadow: none;
  flex: 0 0 auto;
}

/* coins: the client's auctionhouse-icon-coin-* textures in place of the SVG sprite */
.wah-ig .wgf-coin {
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  margin-left: calc(2 * var(--u));
  vertical-align: -0.1em;
  background: center / contain no-repeat;
  fill: none;
}
.wah-ig .wgf-coin use { display: none; }
.wah-ig .wgf-coin--g, .wah-ig .wgf-coin--gold { background-image: url(/assets/ui/auctionhouse-icon-coin-gold.png); }
.wah-ig .wgf-coin--s, .wah-ig .wgf-coin--silver { background-image: url(/assets/ui/auctionhouse-icon-coin-silver.png); }
.wah-ig .wgf-coin--c, .wah-ig .wgf-coin--copper { background-image: url(/assets/ui/auctionhouse-icon-coin-copper.png); }
.wah-ig .wgf-price { font-family: var(--ig-num); color: var(--ig-white); font-weight: 400; }
.wah-ig .wgf-price__seg { margin-left: calc(4 * var(--u)); }
.wah-ig .wgf-price__seg:first-child { margin-left: 0; }

/* item quality colours (ITEM_QUALITY_COLORS) */
.wah-ig :is(.q-poor, .q0) { color: #9d9d9d; }
.wah-ig :is(.q-common, .q1) { color: #ffffff; }
.wah-ig :is(.q-uncommon, .q2) { color: #1eff00; }
.wah-ig :is(.q-rare, .q3) { color: #0070dd; }
.wah-ig :is(.q-epic, .q4) { color: #a335ee; }
.wah-ig :is(.q-legendary, .q5) { color: #ff8000; }
.wah-ig :is(.q-artifact, .q6, .q-heirloom, .q7) { color: #e6cc80; }

/* MinimalScrollBar: thin track + thumb (WebKit/Blink; Firefox gets the thin native bar) */
.wah-ig .ah-sidebar, .wah-ig .ah-table-shell { scrollbar-width: thin; scrollbar-color: #6d6151 #000; }
.wah-ig ::-webkit-scrollbar { width: calc(8 * var(--u)); }
.wah-ig ::-webkit-scrollbar-track { background: url(/assets/ui/minimal-scrollbar-track-middle.png) center / 100% 100% repeat-y; }
.wah-ig ::-webkit-scrollbar-thumb { background: url(/assets/ui/minimal-scrollbar-thumb-middle.png) center / 100% 100%; border-radius: 4px; }

/* --- bottom: MoneyFrameInset + ThinGoldEdge money frame, then the status line ---------- */
:is(#ahApp, .fah-window).wah-ig .ah-statusbar {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  padding: 0 calc(8 * var(--u)) 0 0;
  border: 0;
  background: none;
  color: #b9b9b9;
  font-family: var(--ig-friz);
  font-size: calc(9.5 * var(--u));
}
:is(#ahApp, .fah-window).wah-ig .ah-statusbar > #ahFreshness {
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 calc(158 * var(--u));
  height: calc(19 * var(--u));
  margin: 0 0 0 calc(8 * var(--u));
  padding: 0 calc(8 * var(--u));
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background:
    url(/assets/ui/moneyframe-left.png) left center / auto 100% no-repeat,
    url(/assets/ui/moneyframe-right.png) right center / auto 100% no-repeat,
    url(/assets/ui/moneyframe-middle.png) center / 100% 100% no-repeat;
}
:is(#ahApp, .fah-window).wah-ig .ah-statusbar > #ahFreshness[hidden] { display: inline-flex !important; }
:is(#ahApp, .fah-window).wah-ig .wgf-snapshot__seal { display: none; }
:is(#ahApp, .fah-window).wah-ig #ahFreshness .wgf-snapshot__body,
:is(#ahApp, .fah-window).wah-ig #ahFreshness .wgf-snapshot__meta { display: inline-flex; flex-direction: row; flex-wrap: nowrap; gap: calc(4 * var(--u)); align-items: baseline; white-space: nowrap; margin: 0; padding: 0; line-height: 1; }
:is(#ahApp, .fah-window).wah-ig #ahFreshness .wgf-snapshot__label,
:is(#ahApp, .fah-window).wah-ig #ahFreshness .wgf-snapshot__rel { display: inline; margin: 0; padding: 0; line-height: 1; }
:is(#ahApp, .fah-window).wah-ig .wgf-snapshot__label { color: var(--ig-gold); font-family: var(--ig-friz); font-size: calc(9.5 * var(--u)); letter-spacing: 0; text-transform: none; }
:is(#ahApp, .fah-window).wah-ig .wgf-snapshot__meta, :is(#ahApp, .fah-window).wah-ig .wgf-snapshot__rel { color: var(--ig-white); font-family: var(--ig-num); font-size: calc(11 * var(--u)); }
:is(#ahApp, .fah-window).wah-ig #ahStatus { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(#ahApp, .fah-window).wah-ig #ahResultCount { color: var(--ig-gold); }

/* --- tabs under the frame: PanelTabButtonTemplate ------------------------------------ */
.wah-ig-tabs {
  position: absolute;
  z-index: 0;
  left: calc(20 * var(--u));
  top: calc(100% - 5 * var(--u));
  display: flex;
  align-items: flex-start;
}
.wah-ig-tab {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(80 * var(--u));
  height: calc(36 * var(--u));
  margin-right: calc(-6 * var(--u));
  padding: calc(6 * var(--u)) calc(18 * var(--u)) 0;
  background:
    url(/assets/ui/uiframe-tab-left.png) left top / auto 100% no-repeat,
    url(/assets/ui/uiframe-tab-right.png) right top / auto 100% no-repeat,
    url(/assets/ui/_uiframe-tab-center.png) left top / 100% 100% no-repeat;
  color: var(--ig-gold);
  font-family: var(--ig-friz);
  font-size: calc(10 * var(--u));
  text-decoration: none;
  text-shadow: var(--ig-shadow);
  white-space: nowrap;
}
.wah-ig-tab:hover { color: var(--ig-white); text-decoration: none; }
.wah-ig-tab[aria-current] {
  z-index: 1;
  height: calc(42 * var(--u));
  margin-top: calc(-6 * var(--u));
  padding-top: calc(10 * var(--u));
  background-image:
    url(/assets/ui/uiframe-activetab-left.png),
    url(/assets/ui/uiframe-activetab-right.png),
    url(/assets/ui/_uiframe-activetab-center.png);
  color: var(--ig-white);
}
.wah-ig-tab:focus-visible { outline: 2px solid var(--ig-gold); outline-offset: -4px; }


/* ======================================================================================
   4. Small screens: the frame keeps its art but the content flows (no fixed height).
   ====================================================================================== */
@media (max-width: 1180px) {
  .wah-ig { --u: 1.25px; }
}
@media (max-width: 900px) {
  .wah-ig { --u: 1.2px; }
  :is(#ahApp, .fah-window).wah-ig { height: auto; grid-template-rows: auto auto auto auto; padding-bottom: calc(6 * var(--u)); }
  :is(#ahApp, .fah-window).wah-ig .ah-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 46px calc(6 * var(--u)) calc(4 * var(--u));
    gap: calc(4 * var(--u)) calc(6 * var(--u));
  }
  :is(#ahApp, .fah-window).wah-ig .ah-realm-wrap,
  :is(#ahApp, .fah-window).wah-ig .ah-searchbox { grid-column: 1 / -1; }
  :is(#ahApp, .fah-window).wah-ig .ah-search-button { width: 100%; }
  :is(#ahApp, .fah-window).wah-ig .ah-filter-button, :is(#ahApp, .fah-window).wah-ig .ah-control { width: calc(100% - 8 * var(--u)); font-size: calc(10 * var(--u)); padding-left: calc(8 * var(--u)); }
  :is(#ahApp, .fah-window).wah-ig .ah-layout { grid-template-columns: minmax(0, 1fr); }
  :is(#ahApp, .fah-window).wah-ig .ah-sidebar { max-height: calc(220 * var(--u)); height: auto; }
  :is(#ahApp, .fah-window).wah-ig .ah-cat-row { width: calc(100% - 4 * var(--u)); }
  :is(#ahApp, .fah-window).wah-ig .ah-cat-row[data-depth="1"] { width: calc(100% - 14 * var(--u)); }
  :is(#ahApp, .fah-window).wah-ig .ah-cat-row[data-depth="2"], :is(#ahApp, .fah-window).wah-ig .ah-cat-row[data-depth="3"] { width: calc(100% - 24 * var(--u)); }
  :is(#ahApp, .fah-window).wah-ig .ah-main { margin: calc(4 * var(--u)) 0 0; }
  :is(#ahApp, .fah-window).wah-ig .ah-table-shell { height: auto; max-height: 70vh; }
  :is(#ahApp, .fah-window).wah-ig .ah-table th.col-price { width: calc(110 * var(--u)); }
  :is(#ahApp, .fah-window).wah-ig .ah-table th.col-market, :is(#ahApp, .fah-window).wah-ig .ah-table td.market-cell { display: none; }
  :is(#ahApp, .fah-window).wah-ig .ah-statusbar { flex-wrap: wrap; height: auto; padding: calc(4 * var(--u)) 0; }
}
@media (max-width: 560px) {
  :is(#ahApp, .fah-window).wah-ig .ah-table th.col-type, :is(#ahApp, .fah-window).wah-ig .ah-table td.col-type { display: none; }
  :is(#ahApp, .fah-window).wah-ig .ah-table th.col-qty { width: calc(64 * var(--u)); }
  :is(#ahApp, .fah-window).wah-ig .ah-table td { font-size: calc(11 * var(--u)); }
  :is(#ahApp, .fah-window).wah-ig .ah-table .ah-subtext { display: none; }
  .wah-ig-tab { min-width: 0; padding-inline: calc(12 * var(--u)); }
}

/* ======================================================================================
   thewowdb only: the pieces this site has that wowauctionhouse.com does not.
   ====================================================================================== */
/* the site's own frame furniture gives way to the client's */
.wgf-tool-panel--ah:has(> .wah-ig) { padding: 0; background: none; border: 0; box-shadow: none; overflow: visible; }
:is(#ahApp, .fah-window).wah-ig { overflow: visible; }
.wah-ig .ah-cat-count { display: none; }

/* Forever (server-rendered): Realm + Ruleset dropdowns ride in the search bar, where the
   client keeps its own; the results list is the only thing that scrolls. */
:is(#fah, .fah-window).wah-ig .ah-toolbar { display: flex; }
:is(#fah, .fah-window).wah-ig .ah-toolbar > .ah-searchbox { flex: 1 1 0; min-width: calc(90 * var(--u)); }
:is(#fah, .fah-window).wah-ig .ah-toolbar > .ah-search-button { flex: 0 0 calc(110 * var(--u)); }
:is(#fah, .fah-window).wah-ig .ah-toolbar { gap: calc(4 * var(--u)); }
:is(#fah, .fah-window).wah-ig .fah-houses { display: flex; flex-wrap: nowrap; gap: 0; padding: 0; background: none; }
:is(#fah, .fah-window).wah-ig .fah-pick { gap: 0; }
:is(#fah, .fah-window).wah-ig .fah-pick > .ah-state-realm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
:is(#fah, .fah-window).wah-ig .fah-pick__sel { min-width: 0; width: auto; max-width: calc(128 * var(--u)); margin-inline: calc(2 * var(--u)); }
:is(#fah, .fah-window).wah-ig .ah-browse-view { display: flex; flex-direction: column; min-height: 0; }
:is(#fah, .fah-window).wah-ig .ah-table-shell { flex: 1 1 auto; min-height: 0; }
:is(#fah, .fah-window).wah-ig .ah-table :is(th, td).col-seen { display: none; }
:is(#fah, .fah-window).wah-ig .ah-table thead th > a { display: block; color: inherit; text-decoration: none; }
:is(#fah, .fah-window).wah-ig .ah-table th.is-sorted[aria-sort="ascending"] .sort-arrow { transform: scaleY(-1); }
:is(#fah, .fah-window).wah-ig .ah-table th.col-qty, :is(#fah, .fah-window).wah-ig .ah-table td.qty-cell,
:is(#fah, .fah-window).wah-ig .ah-table th.col-type, :is(#fah, .fah-window).wah-ig .ah-table td.col-type { text-align: left; }
:is(#fah, .fah-window).wah-ig .ah-table td.ah-empty { white-space: normal; color: #b9b9b9; padding: calc(14 * var(--u)); height: auto; line-height: 1.4; }
:is(#fah, .fah-window).wah-ig .ah-table tbody tr:has(.ah-empty) { background: none; cursor: default; }

/* status line: money frame (freshness) - what is listed - pager as two client buttons */
:is(#fah, .fah-window).wah-ig #ahStatus b { color: var(--ig-gold); font-weight: 400; }
:is(#fah, .fah-window).wah-ig .fah-pager { display: flex; align-items: center; gap: calc(2 * var(--u)); margin: 0; padding: 0; border: 0; background: none; }
:is(#fah, .fah-window).wah-ig .fah-pager .ah-filter-button { margin: 0 calc(4 * var(--u)); padding: 0 calc(10 * var(--u)) !important; background-image: none !important; font-size: calc(10 * var(--u)); text-decoration: none; overflow: visible; }
:is(#fah, .fah-window).wah-ig .fah-pager .ah-filter-button.is-off { color: var(--ig-grey); cursor: default; filter: saturate(.3) brightness(.8); }
:is(#fah, .fah-window).wah-ig .fah-pager__where { color: var(--ig-white); font-family: var(--ig-num); font-size: calc(11 * var(--u)); white-space: nowrap; }
@media (max-width: 900px) {
  :is(#fah, .fah-window).wah-ig .ah-toolbar { flex-wrap: wrap; padding-top: 46px; }
  :is(#fah, .fah-window).wah-ig .ah-toolbar > .ah-realm-wrap, :is(#fah, .fah-window).wah-ig .ah-toolbar > .ah-searchbox { flex: 1 1 100%; }
  :is(#fah, .fah-window).wah-ig .fah-pick { flex: 1 1 0; }
  :is(#fah, .fah-window).wah-ig .fah-pick__sel { width: calc(100% - 4 * var(--u)); max-width: none; }
  :is(#fah, .fah-window).wah-ig .ah-toolbar > .ah-search-button { flex: 1 1 auto; }
  :is(#fah, .fah-window).wah-ig .ah-table-shell { max-height: 70vh; }
  :is(#fah, .fah-window).wah-ig .fah-pager { flex: 1 1 100%; justify-content: space-between; }
}
/* the coin is a flat icon, not a 3D head: no zoom past the ring */
:is(#ahApp, .fah-window).wah-ig .wah-ig-portrait img { transform: scale(1.08); }
:is(#fah, .fah-window).wah-ig .ah-toolbar a.ah-filter-button { color: var(--ig-gold); text-decoration: none; opacity: 1; }
:is(#fah, .fah-window).wah-ig .ah-toolbar a.ah-filter-button:hover { color: var(--ig-white); }
:is(#fah, .fah-window).wah-ig .fah-pager .ah-filter-button::after,
:is(#fah, .fah-window).wah-ig .fah-pager .ah-filter-button::before { content: none; display: none; }