/* Design tokens come from /static/css/_tokens.css, loaded via <link> in the page
   head BEFORE this sheet (FR-3: the render-blocking CSS import chain was removed). */
:root {
  --ah-bg: var(--wgf-bg-2);
  --ah-page: var(--wgf-bg);
  --ah-panel: var(--wgf-panel-1);
  --ah-panel-2: var(--wgf-panel-2);
  --ah-panel-3: var(--wgf-panel-3);
  --ah-border: var(--wgf-border-neutral);
  --ah-border-soft: var(--wgf-border-neutral-soft);
  --ah-gold-border: var(--wgf-gold-dim);
  --ah-gold: var(--wgf-gold-bright);
  --ah-gold-soft: var(--wgf-gold-soft);
  --ah-text: var(--wgf-text);
  --ah-muted: var(--wgf-muted);
  --ah-green: var(--wgf-up);
  --ah-red: var(--wgf-down);
  --ah-blue: var(--q-rare);     /* WoW item-quality colors — keep as-is */
  --ah-purple: var(--q-epic);
  --ah-orange: var(--q-legendary);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

/* One search per page (redesign P1): the AH toolbar owns search on the browser —
   typeahead + in-category filtering — so the shell topbar search is hidden here,
   the same way the homepage hides it in favor of its hero search. */
body[data-wgf-page="auction-house"] .wgf-shell-search { display: none; }

body.wgf-ah-page {
  margin: 0;
  background:
    radial-gradient(circle at top center, rgba(244, 196, 92, 0.08), transparent 34rem),
    linear-gradient(180deg, var(--wgf-bg-2) 0%, var(--wgf-bg) 100%);
  color: var(--ah-text);
  font-family: var(--font-ui);
  font-size: 14px;
}

a {
  color: var(--ah-gold);
}

/* (Removed 2026-06-20) The AH pages used to override the shared header logo + nav to a
   serif font, which made the global nav read differently here than on the rest of the
   site. The header now matches site-wide — see site_shell.py / wgf-site-shell.css. */

.ah-item-watch {
  border: 1px solid rgba(var(--wgf-gold-rgb), 0.35);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ah-gold);
  border-radius: 8px;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  font-size: 0.85rem;
}

/* De-app-ified 2026-07-01 (redesign P1): the browser is a normal page section that
   flows and scrolls WITH the page — no viewport-height lock, no clipped internal
   scrolling, no desktop-window shadow. */
.ah-window {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  background: var(--wgf-panel-2);
  border: 1px solid var(--wgf-border);
  border-radius: var(--radius-card, 6px);
  box-shadow: var(--shadow-1, none);
}

.ah-realm-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

.ah-realm-wrap .ah-realm-select {
  flex: 1;
  min-width: 0;
}

/* Region tag beside the realm dropdown: the kit .wgf-chip (markup) owns the look
   (squared mini-chip, metal bevel, gold small-caps); only the flex fit lives here. */
.ah-region-display {
  flex: 0 0 auto;
}

.ah-state-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-2);
  padding: var(--space-2) var(--space-2);
  background: var(--wgf-panel-1);
  border-bottom: 1px solid var(--wgf-border-neutral-soft);
}

.ah-state-bar[hidden],
.ah-results-context[hidden] {
  display: none !important;
}

.ah-state-realm {
  color: var(--ah-gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.ah-state-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 26px;
  padding: 2px var(--space-2) 2px var(--space-2);
  border: 1px solid rgba(244, 196, 92, 0.40);
  border-radius: 4px;
  background: rgba(60, 48, 18, 0.40);
  color: #e8e8f4;
  font-family: var(--font-ui);
  font-size: 12px;
  cursor: pointer;
}

.ah-state-chip:hover {
  border-color: rgba(244, 196, 92, 0.65);
  background: rgba(74, 58, 22, 0.55);
}

.ah-state-chip--search {
  border-color: rgba(155, 147, 132, 0.5);
  background: rgba(40, 35, 28, 0.5);
}

.ah-state-chip-x {
  color: var(--ah-gold);
  font-size: 15px;
  line-height: 1;
}

.ah-state-clear-link {
  border: 0;
  background: transparent;
  color: var(--ah-muted);
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
  padding: 2px var(--space-1);
}

.ah-state-clear-link:hover {
  color: var(--ah-gold);
}

.ah-results-context {
  padding: 12px var(--space-3) var(--space-2);
  background: linear-gradient(180deg, rgba(33, 29, 24, 0.95), rgba(23, 21, 21, 0.2));
  border-bottom: 1px solid var(--wgf-border-neutral-soft);
}

.ah-results-context h2 {
  margin: 0 0 var(--space-1);
  color: #fff8dc;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.ah-results-context p {
  margin: 0;
  color: var(--ah-muted);
  font-size: 13px;
  line-height: 1.4;
}

.ah-results-context .ah-results-meta {
  margin-top: var(--space-1);
  color: #94866b;
  font-size: 12px;
}

.ah-toolbar {
  display: grid;
  grid-template-columns: 224px 34px 34px minmax(260px, 1fr) 150px 150px 160px;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) 12px;
  background: var(--wgf-panel-2);
  border-bottom: 1px solid var(--wgf-border-neutral);
}

.ah-control,
.ah-filter-button,
.ah-search-button,
.ah-icon-button {
  height: 31px;
  border: 1px solid var(--wgf-border-neutral-soft);
  border-radius: 4px;
  background: var(--wgf-panel-1);
  color: var(--ah-text);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  font-family: var(--font-ui);
}

.ah-control {
  padding: 0 var(--space-2);
}

.ah-icon-button {
  color: #777;
  font-size: 20px;
  cursor: pointer;
}

.ah-icon-button.flower {
  color: var(--wgf-gold-bright);
  text-shadow: 0 0 7px rgba(244,196,92,0.6);
}

/* Search well: the kit .wgf-input / .wgf-input--search classes (markup) own the
   3-slice inputfield art, magnifier glyph and placeholder color. Only page fit
   (position for the suggest dropdown, toolbar height) lives in this sheet. */

.ah-filter-button {
  color: var(--wgf-gold-link);
  background: var(--wgf-panel-1);
  font-weight: 800;
  cursor: pointer;
}

/* Note: Search button now uses .wgf-btn-red class from wgf-chrome.css for real Blizzard chrome.
   This legacy rule is retained for reference but is overridden by the kit. */
.ah-search-button {
  background: linear-gradient(180deg, #a61f1f, #7c1414);
  border: 1px solid #d8b25a;
  color: #ffe8b0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}

.ah-layout {
  display: grid;
  grid-template-columns: minmax(180px, 225px) minmax(0, 1fr);
}

/* Sidebar = a normal sticky site column: follows the page scroll, keeps its own
   scrollbar only when the tree outgrows the viewport (topbar is sticky at ~56px).
   Background uses the client's real categories panel texture. */
.ah-sidebar {
  background: var(--wgf-bg-2);
  border-right: 1px solid var(--wgf-border-neutral);
  padding: var(--space-2) var(--space-1) var(--space-2) var(--space-2);
  position: sticky;
  top: 64px;
  align-self: start;
  max-height: calc(100vh - 76px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.ah-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.ah-sidebar-toggle {
  display: none;
  height: 26px;
  padding: 0 var(--space-2);
  border: 1px solid var(--wgf-border-neutral);
  border-radius: 4px;
  background: var(--wgf-panel-1);
  color: var(--ah-gold);
  font-size: 11px;
  cursor: pointer;
}

.ah-sidebar-title {
  color: var(--ah-gold);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  padding: var(--space-2) var(--space-2);
  background: var(--wgf-panel-2);
  border: 1px solid var(--wgf-border-neutral);
  border-radius: 0;
}

.ah-category-tree {
  padding: var(--space-1) var(--space-1) var(--space-5) 0;
}

/* ── Item/battle-pet icon sizing in result rows + item links ──
   (Harvested from the retired ah/item-detail.css, 2026-07-01 P4 sweep — these are the
   only rules from that sheet current markup still uses; the deals page relies on the
   a[data-wgf-item] sizing for its row anchors. Square icons 30px to match game client.)

   2026-08-02: DIRECT-CHILD only (`>`). Icons wrapped in the .wgf-qborder quality frame are
   grandchildren of the anchor, and this rule's `!important` sizing + margin-right hijacked
   them — pushing a 30px square 4px off-centre inside the 44px round frame, which is what
   made the ring read as "a silver disc bleeding out from behind the icon". The frame owns
   its own icon sizing in wgf-chrome.css; this legacy rule only dresses UNFRAMED icons. */
.ah-item-cell a[data-wgf-item] > img,
.ah-item-cell a[data-wgf-item] > .icon {
  width: 30px !important;
  height: 30px !important;
  margin-right: var(--space-2) !important;
  vertical-align: middle !important;
  border-radius: 2px;
}

/* Defensive: only ever ONE icon per item link (duplicate icon guard). */
a[data-wgf-item] img:nth-of-type(n+2),
a[data-wgf-item] .icon:nth-of-type(n+2) {
  display: none !important;
}

.ah-bp-icon {
  display: inline-block !important;
  width: 19px !important;
  height: 19px !important;
  margin-right: var(--space-2) !important;
  vertical-align: middle !important;
  border-radius: 2px;
}

.ah-bp-icon-large {
  width: 48px !important;
  height: 48px !important;
  margin-right: var(--space-2) !important;
  border-radius: 3px;
}

.ah-bp-link img:not(.ah-bp-icon),
.ah-bp-link .icon,
.ah-bp-link span[class*="icon"] {
  display: none !important;
}

.category-tree a,
.sidebar a,
.ah-category-tree a,
.ah-sidebar a {
  color: var(--wgf-gold-link);
}

.category-tree a:hover,
.ah-category-tree a:hover {
  color: var(--wgf-gold-hover);
}

.ah-loading {
  color: var(--ah-muted);
  padding: 12px;
}

/* ig-26 category-tree row: parchment-gold Friz text on the dark rail, squared,
   one idiom for every depth (indent alone marks hierarchy - browse.js paddingLeft). */
.ah-cat-row {
  width: 100%;
  min-height: 26px;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  color: var(--wgf-gold-muted);
  font-family: var(--font-game);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}

.ah-history-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.ah-item-panel {
  max-width: 760px;
  margin: 0 auto var(--space-4);
  padding: var(--space-3) var(--space-3) var(--space-3);
  border: 1px solid rgba(105, 86, 55, .72);
  background: rgba(12, 11, 10, .62);
  box-shadow: inset 0 0 0 1px rgba(255, 209, 96, .05);
}

.ah-item-panel--market .ah-item-stats {
  margin-top: var(--space-1);
}

.ah-item-updated {
  margin: -8px auto var(--space-3);
}

.ah-detail-section-title--inline {
  margin: 0;
  text-align: left;
}

.ah-history-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.ah-history-panel-head .ah-detail-section-title--inline {
  flex: 1 1 auto;
  min-width: 120px;
}

.ah-range-tabs {
  display: inline-flex;
  align-items: stretch;
  gap: 2px;
  padding: var(--space-1);
  border: 1px solid rgba(105, 86, 55, .72);
  border-radius: 4px;
  background: rgba(12, 11, 10, .62);
  box-shadow: inset 0 0 0 1px rgba(255, 209, 96, .05);
  flex-wrap: nowrap;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ah-range-tab {
  appearance: none;
  border: 1px solid transparent;
  margin: 0;
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.2;
  color: #bca77a;
  background: transparent;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.ah-range-tab:hover {
  color: #f1eadb;
  border-color: rgba(201, 160, 65, 0.45);
  background: rgba(52, 39, 7, 0.45);
}

.ah-range-tab.is-active {
  color: var(--wgf-gold-primary);
  border-color: rgba(201, 160, 65, .55);
  background: linear-gradient(180deg, #6b4a12 0%, #3d2a0a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.12);
}

.ah-range-tab:focus-visible {
  outline: 2px solid rgba(240, 192, 64, .75);
  outline-offset: 1px;
}

.ah-history-status-line {
  margin: 0 0 var(--space-1);
  text-align: center;
  font-size: 12px;
  color: #9f8a68;
  line-height: 1.4;
}

.ah-history-collecting-note {
  margin: 0 0 var(--space-2);
  padding: var(--space-2) var(--space-2);
  text-align: center;
  font-size: 12px;
  line-height: 1.35;
  color: var(--wgf-gold-primary);
  border: 1px solid rgba(201, 160, 65, 0.35);
  border-radius: 3px;
  background: rgba(52, 39, 7, 0.35);
}

.ah-history-collecting-note:empty,
.ah-history-status-line:empty {
  display: none;
}

.ah-history-expand-note {
  margin: 0.5rem 0 0.65rem;
  font-size: 0.82rem;
  color: var(--wgf-gold-soft);
}

.ah-history-controls {
  display: inline-flex;
  gap: 0.35rem;
}

.ah-history-range {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.25);
  color: rgba(230, 240, 255, 0.85);
  border-radius: 6px;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  cursor: pointer;
}

.ah-history-range.is-active {
  border-color: rgba(244, 196, 92, 0.55);
  background: rgba(90, 70, 24, 0.45);
}

.ah-history-heatmap-wrap {
  margin-top: 0.85rem;
}

.ah-history-heatmap {
  display: block;
  width: 100%;
  height: 72px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
}

/* (2026-08-05) The .top / .group web-card cuts (panel boxes, soft borders, 5px/4px
   radii, font-ui overrides) are gone per ig-26: every depth shares the one row idiom
   above; selection is the gold-bordered highlight, indent marks the hierarchy. */

/* Hover/active visuals live in the .wgf-window rules below (nav-rail recut);
   the auctionhouse-ui-row-highlight/-select slices referenced here were never
   committed, so their url() layers painted nothing - dead refs removed 2026-08-05. */
.ah-cat-row:hover {
  color: var(--ah-gold);
}

.ah-cat-row.active {
  color: var(--ah-gold);
}

.ah-cat-row.utility {
  color: var(--ah-green);
}

.ah-cat-row.token {
  color: #66b7ff;
}

.ah-cat-caret {
  width: 14px;
  color: var(--wgf-gold-muted);
  flex: 0 0 14px;
  cursor: pointer;
}

.ah-cat-caret:hover {
  color: var(--ah-gold);
}

.ah-cat-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ah-cat-children[hidden] {
  display: none;
}

.ah-main {
  min-width: 0;
  background: var(--wgf-bg-base);
}

.ah-table-shell {
  position: relative;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-left: 1px solid var(--wgf-border-neutral-soft);
  background: var(--wgf-bg-base);
}

/* border-collapse is SEPARATE (2026-08-05): collapsed 1px header borders straddled
   the cell edges and overflowed the results well by ~2px, leaving a permanent
   horizontal scrollbar strip at desktop widths with nothing to scroll. With
   border-box cells + border-spacing:0, every border stays inside the column
   widths, so table scrollWidth == well clientWidth. Cell separators are drawn
   one-sided (right/top/bottom + a first-child left cap) to keep 1px seams. */
.ah-table {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  color: var(--ah-text);
  font-family: var(--font-ui);
  font-size: 14px;
}

.ah-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 28px;
  padding: var(--space-1) var(--space-2);
  background: var(--wgf-panel-2);
  color: #fff8dc;
  border: 0;
  border-top: 1px solid var(--wgf-border-neutral);
  border-right: 1px solid var(--wgf-border-neutral);
  border-bottom: 1px solid var(--wgf-border-neutral);
  text-align: left;
  font-size: 13px;
  font-weight: 800;
}

.ah-table thead th:first-child {
  border-left: 1px solid var(--wgf-border-neutral);
}

.ah-table thead th.ah-sortable {
  cursor: pointer;
  user-select: none;
}

.ah-table thead th.ah-sortable:hover {
  background: var(--wgf-panel-3);
}

.ah-table thead th.is-sorted {
  color: #ffe8a3;
}

.ah-table .col-price { width: 190px; text-align: right; }
.ah-table .col-type { width: 92px; }
.ah-table .col-qty { width: 110px; text-align: right; }
.ah-table .col-market { width: 160px; text-align: right; }

.sort-arrow {
  display: inline-block;
  min-width: 0.75em;
  color: var(--ah-gold);
}

.ah-table thead th.is-sorted .sort-arrow {
  color: #ffd76a;
}

.ah-table tbody td {
  height: 31px;
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--wgf-border-neutral-soft);
  vertical-align: middle;
}

.ah-table tbody tr {
  cursor: pointer;
}

/* In-game AH row plates: zebra with real Blizzard textures, gold hover, gold selected (2026-07-03).
   Odd/even rows use the real auctionhouse-rowstripe textures from the client UI. Stripes are
   strengthened with background-attachment: fixed to ensure consistent visibility across scroll. */
.ah-table tbody tr:nth-child(odd) {
  background: url(/assets/ui/auctionhouse-rowstripe-1.png) left top / auto 100% repeat-x fixed;
}
.ah-table tbody tr:nth-child(even) {
  background: url(/assets/ui/auctionhouse-rowstripe-2.png) left top / auto 100% repeat-x fixed;
}
.ah-table tbody tr:hover {
  background: linear-gradient(180deg, rgba(var(--wgf-gold-rgb),.10), rgba(var(--wgf-gold-rgb),.04));
}
.ah-table tbody tr.selected {
  background: linear-gradient(180deg, rgba(var(--wgf-gold-rgb),.22), rgba(var(--wgf-gold-rgb),.10));
  outline: 1px solid rgba(var(--wgf-gold-rgb),.45);
  outline-offset: -1px;
}

.ah-table td.num,
.ah-table td.price-cell,
.ah-table td.market-cell,
.ah-table td.qty-cell {
  text-align: right;
}

.ah-item-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.ah-item-icon,
.ah-placeholder-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  border: 1px solid var(--wgf-border-neutral);
  border-radius: 2px;
  background: var(--wgf-bg-base);
}

.ah-placeholder-icon {
  display: inline-block;
  background: linear-gradient(135deg, #15110e, #2b241b);
}

/* First-party item icon for NORMAL AH rows + the in-app item hero (battle pets keep
   their own .ah-bp-icon). Datamine/AH-cache icon, local placeholder on a miss — never
   a Wowhead/zamimg request. Icons are SQUARE with small radii to match the in-game client.
   A distinct class name avoids the legacy `img.ah-item-icon` display:none guards. */
.wgf-ah-fpicon {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: var(--space-2);
  vertical-align: middle;
  border-radius: 2px;
  flex: 0 0 auto;
  background: #080706;
  object-fit: cover;
}

.wgf-ah-fpicon--lg {
  width: 48px;
  height: 48px;
  margin-right: var(--space-2);
  border-radius: 3px;
}

.ah-item-link {
  /* The item link is an <a> now (real row anchors, 2026-07-07). Buttons centered
     their icon+name content by default; anchors baseline-align, sagging the name
     to the icon's bottom edge — flex-center restores the button-era alignment. */
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  font-weight: 800;
  text-shadow: 0 0 4px rgba(0,0,0,0.9);
}

.ah-subtext {
  color: #918777;
  font-size: 11px;
  white-space: nowrap;
}

.q-poor { color: var(--q-poor); }
.q-common { color: #ffffff; }
.q-uncommon { color: var(--q-uncommon); }
.q-rare { color: var(--q-rare); }
.q-epic { color: var(--q-epic); }
.q-legendary { color: var(--q-legendary); }
.q-artifact { color: var(--q-artifact); }
.q-heirloom { color: var(--q-heirloom); }

.money {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  font-family: var(--font-mono);
  white-space: nowrap;
}

.coin {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* legacy dot-swatch coin renderer deleted 2026-07-02 - coins come from window.WGFCoins */

/* Shimmer skeleton loading rows */
.ah-skeleton-tr td {
  padding: var(--space-1) var(--space-2);
  border: none;
  background: transparent;
}

.ah-skeleton-row {
  display: block;
  height: 38px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    var(--ah-panel) 25%,
    rgba(200, 146, 42, 0.10) 50%,
    var(--ah-panel) 75%
  );
  background-size: 200% 100%;
  animation: ah-shimmer 1.4s ease-in-out infinite;
}

@keyframes ah-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ah-skeleton-row { animation: none; }
}

.ah-empty {
  padding: 38px var(--space-2) !important;
  color: #ddd;
  text-align: center;
  font-size: 20px;
}

.ah-empty strong {
  display: block;
  margin-bottom: var(--space-2);
}

.ah-details-drawer {
  border-top: 1px solid var(--wgf-border-neutral);
  background: var(--wgf-panel-1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.ah-details-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: var(--space-2) 12px;
  border-bottom: 1px solid var(--wgf-border-neutral-soft);
}

.ah-close-button {
  width: 28px;
  height: 28px;
  border: 1px solid var(--wgf-border-neutral);
  background: var(--wgf-panel-2);
  color: var(--ah-gold);
  border-radius: 4px;
  cursor: pointer;
}

.ah-detail-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ah-detail-title h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
}

.ah-detail-title p {
  margin: 2px 0 0;
}

.ah-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  padding: var(--space-2) 12px 12px;
}

.ah-detail-panel {
  min-height: 132px;
  border: 1px solid var(--wgf-border-neutral-soft);
  background: var(--wgf-panel-1);
  border-radius: 4px;
}

.ah-detail-panel h2 {
  margin: 0;
  padding: var(--space-2) var(--space-2);
  color: var(--ah-gold);
  background: var(--wgf-panel-2);
  border-bottom: 1px solid var(--wgf-border-neutral-soft);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ah-panel-body {
  padding: var(--space-2) var(--space-2);
}

.muted {
  color: var(--ah-muted);
}

.ah-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.ah-stat {
  border: 1px solid var(--wgf-border-neutral-soft);
  background: var(--wgf-panel-1);
  border-radius: 3px;
  padding: var(--space-1) var(--space-2);
}

.ah-stat span {
  display: block;
  color: var(--ah-muted);
  font-size: 11px;
}

.ah-stat strong {
  color: var(--ah-gold);
  font-family: var(--font-mono);
  font-size: 12px;
}

.ah-price-list {
  display: grid;
  gap: var(--space-1);
}

.ah-price-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-1);
  background: var(--wgf-bg-2);
  border: 1px solid var(--wgf-border-neutral-soft);
  border-radius: 3px;
}

.ah-history-chart {
  width: 100%;
  height: 78px;
  display: block;
  border: 1px solid var(--wgf-border-neutral-soft);
  background: var(--wgf-bg-base);
}

/* Quiet meta line (was a fixed desktop-app status bar): same #ahStatus /
   #ahResultCount / #ahSyncStatus hooks, styled as an inline footnote row. */
.ah-statusbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) 12px;
  border-top: 1px solid var(--wgf-border-neutral-soft);
  color: var(--wgf-muted);
  font-size: 12px;
}

.ah-mini-footer {
  width: min(1500px, calc(100vw - 44px));
  height: 29px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: #ddd;
  background: var(--wgf-panel-2);
  border-top: 1px solid var(--wgf-border-neutral);
  padding: 0 var(--space-2);
  font-size: 12px;
}

.ah-mini-footer a {
  color: #ddd;
}

.ah-language {
  height: 22px;
  background: #111;
  color: #fff;
  border: 1px solid #444;
  border-radius: 3px;
}

@media (max-width: 1050px) {
  .ah-window,
  .ah-mini-footer {
    width: 100%;
    max-width: 100%;
  }

  .ah-toolbar {
    grid-template-columns: 1fr 34px 34px;
  }

  .ah-searchbox,
  .ah-sort-select,
  .ah-filter-button,
  .ah-search-button {
    grid-column: 1 / -1;
  }

  .ah-layout {
    grid-template-columns: 1fr;
  }

  .ah-sidebar {
    position: static;      /* stacked layout: no sticky column */
    max-height: 320px;
    border-right: 0;
    border-bottom: 1px solid #37322e;
  }

  .ah-category-tree {
    height: 260px;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .ah-details-grid {
    grid-template-columns: 1fr;
  }
}

/* WGF toolbar cleanup: Deals button removed 2026-07-03; single-row 6-col layout.
   Sort column widened 130 -> 170px (2026-08-05) so the kit dropdown's arrow art
   plus the plain-English sort labels (Price: Low to High) fit uncut. */
.ah-toolbar {
  grid-template-columns: minmax(200px, 248px) minmax(260px, 1fr) 170px 130px 130px 160px;
}

/* Disabled toolbar buttons: the kit's .wgf-btn-dark[disabled] / .is-disabled state
   (dimmed gold on the same charcoal plate) is the one home - the gray
   auctionhouse-nav-button.png cut is gone (2026-08-05). */

@media (max-width: 1050px) {
  .ah-toolbar {
    grid-template-columns: 1fr;
  }

  .ah-searchbox,
  .ah-sort-select,
  .ah-filter-button,
  .ah-search-button {
    grid-column: 1 / -1;
  }
}

/* ── Search typeahead dropdown (2026-06-28) ────────────────────────────────────
   Instant realm-wide suggestions under the AH search box (assets/ah-game-ui.js
   fetchSearchSuggest). A suggestion opens that item's detail directly. */
.ah-searchbox { position: relative; }
.ah-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background: var(--wgf-panel-1);
  border: 1px solid var(--wgf-border-neutral-soft);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  max-height: 380px;
  overflow-y: auto;
}
.ah-suggest[hidden] { display: none; }
.ah-suggest-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: 4px;
  cursor: pointer;
}
.ah-suggest-item.is-active,
.ah-suggest-item:hover { background: rgba(244, 196, 92, 0.12); }
.ah-suggest-icon { display: inline-flex; flex: 0 0 auto; }
.ah-suggest-icon img { width: 22px; height: 22px; border-radius: 4px; }
.ah-suggest-name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ah-suggest-price {
  flex: 0 0 auto;
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  color: var(--wgf-muted, #c9c3b8);
}

/* Hide the iLvl / Slots column entirely when it carries no meaning (commodities,
   landing, realm-wide search) — toggled by browse.js updateBrowseColumnHeader. */
.ah-table.hide-type-col .col-type { display: none; }

/* "All Items" reset entry at top of category sidebar (in-game sidebar behavior, 2026-07-03).
   Same ig-26 row idiom as every other row; it only keeps a breath of space below. */
.ah-cat-row--all-items {
  margin: 0 0 var(--space-1);
}

/* =============================================================================
   AH BROWSER - THE IN-GAME CHROME RE-CUT (owner "OPUS agent" directive on the AH
   browser screenshot, 2026-07-04; docs/ui-ux/13-ingame-reference.md sec 0.9/0.10,
   OWNER_REVIEW_2026-07-03 AH section). The frame around the table now reads like the
   client's Browse Auctions window: a .wgf-window metal frame (markup), inset
   near-black fields + collapsed-dropdown selects (ig-62), the black filter-button
   idiom (ig-63), raised column-header tabs (ig-62), a recessed results WELL, and a
   favorite-star column. Native <select>/<input> are KEPT (keyboard + mobile picker
   intact) and skinned as close as CSS allows. Real Blizzard slices only, via the
   kit in assets/wgf-chrome.css (loaded after this sheet). No AI art, no pill radii.
   Kit vars used here (--wgf-well/-edge, --wgf-metal/-soft, --wgf-plate-hi,
   --wgf-input-h, --wgf-dropdown-h) come from wgf-chrome.css :root (global).
   ============================================================================= */

/* Toolbar rides the raised header tone just under the window title strip. */
.wgf-window .ah-toolbar {
  background: linear-gradient(180deg, var(--wgf-plate-hi), var(--wgf-plate, var(--wgf-well)));
  border-bottom: 1px solid var(--wgf-metal-soft);
}

/* Realm + sort selects -> the client dropdown standard (ig-51/ig-55, ig-26 filter):
   the kit .wgf-dropdown--native wrapper (markup) paints the real 3-slice gold
   frame + red-tab arrow over the native <select> (keyboard, screen reader and
   mobile picker untouched; the option list keeps the kit's near-black rows).
   Only the toolbar/grid fit lives here. The wrappers carry .ah-realm-select /
   .ah-sort-select so the responsive grid-column rules keep binding. */
.ah-toolbar .wgf-dropdown--native {
  width: 100%;
  min-width: 0;
}

/* Search field -> the kit .wgf-input--search well (markup): real inputfield
   3-slice art, site magnifier glyph, grey placeholder. Here: flush with the
   34px dropdown row (the kit input runs 36px elsewhere). */
.wgf-window .ah-toolbar .ah-searchbox {
  height: var(--wgf-dropdown-h, 34px);
}

/* Market Share / Export / Tracked -> the kit .wgf-btn-dark secondary (markup):
   raised charcoal plate, thin metal bevel, gold Friz small-caps label, hover =
   brightness lift, disabled = dimmed gold on the same plate. Only the grid fit
   lives here. */
.wgf-window .ah-toolbar .ah-filter-button {
  width: 100%;
  min-width: 0;
  padding: 0 var(--space-2);
}

/* Search CTA: the markup carries .wgf-btn-red (the kit red button owns the look);
   here we only fit it to the toolbar row height + let it fill its grid cell. */
.wgf-window .ah-toolbar .ah-search-button.wgf-btn-red {
  --wgf-btn-h: 34px;
  --wgf-btn-cap: 15px;
  width: 100%;
  min-width: 0;
}

/* The results table sits in a recessed near-black WELL (ig-63/64) on the window
   plate, instead of the old flat panel surface. */
.wgf-window .ah-main { background: transparent; }
.wgf-window .ah-table-shell {
  margin: var(--space-2);
  border: 1px solid var(--wgf-well-edge);
  border-radius: 4px;
  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);
}

/* Column headers -> raised header tabs (ig-62), squared per the container standard.
   Borders are one-sided (top/right + first-child left cap) so the separate-collapse
   table never outgrows its well. Sort behaviour + arrows unchanged (.ah-sortable JS). */
.wgf-window .ah-table thead th {
  background: linear-gradient(180deg, var(--wgf-plate-hi), var(--wgf-plate, var(--wgf-well)));
  color: var(--wgf-gold-muted, #caa24e);
  border: 0;
  border-top: 1px solid var(--wgf-metal-soft);
  border-right: 1px solid var(--wgf-metal-soft);
  border-radius: 0;
  font-family: var(--font-game);
  font-variant: small-caps;
  letter-spacing: 0.03em;
  text-shadow: var(--text-ink-outline);
}
.wgf-window .ah-table thead th:first-child {
  border-left: 1px solid var(--wgf-metal-soft);
}
.wgf-window .ah-table thead th.ah-sortable:hover,
.wgf-window .ah-table thead th.is-sorted { color: var(--wgf-gold-bright, #ffd76a); }

/* Favorite-star column (ig-26 row-end track affordance; owner favorites/tracked-items
   lane). Visual only until accounts ship - assets/ah-game-ui.js swallows the click. */
.ah-table .col-fav { width: 42px; text-align: center; }
.ah-table td.col-fav { text-align: center; }
.ah-table td.col-fav .wgf-favbtn { display: inline-block; vertical-align: middle; }
.ah-table thead th.col-fav { text-align: center; }
.ah-table thead th.col-fav .ah-col-fav-label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Category rail -> the nav-rail standard (docs sec 9b): complete plates, no
   half-container left-accent bar, subtle white-glow (brightness) hover. Behaviour
   (open/close, active) is unchanged. */
.wgf-window .ah-cat-row { border-left: 0; border-radius: 0; }
.wgf-window .ah-cat-row:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--wgf-gold-bright, #ffd76a);
  filter: brightness(1.06);
}
.wgf-window .ah-cat-row.active {
  background: linear-gradient(180deg, var(--wgf-plate-hi), var(--wgf-plate, var(--wgf-well)));
  border: 1px solid var(--wgf-gold-dark, #8a6a1e);
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(var(--wgf-gold-rgb), 0.22);
  color: var(--wgf-gold-bright, #ffd76a);
}

/* =============================================================================
   .wgf-scroll - reusable in-game scrollbar (complaint A, owner 2026-07-04).
   Dark stone track (#0d0d08) + bronze/gold thumb (#8b7236). The STANDARD
   scrollbar-color/-width pair is the single source (Chrome 121+, Firefox);
   the ::-webkit-scrollbar family below is fenced to engines WITHOUT
   scrollbar-color support (older Safari/WebKit), because Chrome 121+ ignores
   the whole ::-webkit skin the moment scrollbar-width is set - the conflict
   that rendered the AH results well's bar as a naked native strip.
   ============================================================================= */
.wgf-scroll,
.ah-range-tabs {
  scrollbar-width: thin;
  scrollbar-color: #8b7236 #0d0d08;
}
@supports not (scrollbar-color: red blue) {
  .wgf-scroll::-webkit-scrollbar,
  .ah-range-tabs::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  .wgf-scroll::-webkit-scrollbar-track,
  .ah-range-tabs::-webkit-scrollbar-track {
    background: #0d0d08;
  }
  .wgf-scroll::-webkit-scrollbar-thumb,
  .ah-range-tabs::-webkit-scrollbar-thumb {
    background: #8b7236;
    border-radius: 0;
  }
  .wgf-scroll::-webkit-scrollbar-thumb:hover,
  .ah-range-tabs::-webkit-scrollbar-thumb:hover {
    background: #a08040;
  }
  .wgf-scroll::-webkit-scrollbar-corner,
  .ah-range-tabs::-webkit-scrollbar-corner {
    background: #0d0d08;
  }
}