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

.ah-region-display {
  flex: 0 0 auto;
  padding: 0 var(--space-2);
  height: 31px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--wgf-border-neutral-soft);
  border-radius: 4px;
  background: var(--wgf-panel-1);
  color: var(--ah-gold-soft);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.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-searchbox,
.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);
}

.ah-searchbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-2);
}

.ah-searchbox span {
  color: #777;
  font-size: 19px;
}

.ah-searchbox input {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ah-text);
}

.ah-sort-select {
  font-weight: 700;
}

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

.ah-filter-button::first-letter {
  color: var(--ah-gold);
}

/* 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: 4px 4px 0 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;
}

.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: #f3eee2;
  font-family: var(--font-display);
  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);
}

.ah-cat-row.top {
  margin: var(--space-1) 0;
  color: var(--ah-gold);
  background: var(--wgf-panel-2);
  border: 1px solid var(--wgf-border-neutral-soft);
  border-left: 3px solid var(--wgf-border-neutral-soft);
  border-radius: 5px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 800;
}

.ah-cat-row.group {
  margin: var(--space-1) 0;
  background: var(--wgf-panel-2);
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 800;
}

.ah-cat-row:hover {
  color: var(--ah-gold);
  background: url(/assets/ui/auctionhouse-ui-row-highlight.png) left top / auto 100% repeat-x;
}

.ah-cat-row.active {
  color: var(--ah-gold);
  background: url(/assets/ui/auctionhouse-ui-row-select.png) left top / auto 100% repeat-x;
  border-left-color: var(--ah-gold);
}

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

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

.ah-cat-caret {
  width: 14px;
  color: #777;
  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);
}

.ah-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  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: 1px solid var(--wgf-border-neutral);
  text-align: left;
  font-size: 13px;
  font-weight: 800;
}

.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 */
.ah-toolbar {
  grid-template-columns: minmax(200px, 248px) minmax(260px, 1fr) 130px 130px 130px 160px;
}

.wgf-window .ah-filter-button[disabled],
.wgf-window .ah-filter-button.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background-image: url(/assets/ui/auctionhouse-nav-button.png);
  color: #8c8378;
}

.wgf-window .ah-filter-button[disabled]:hover,
.wgf-window .ah-filter-button.disabled:hover {
  background-image: url(/assets/ui/auctionhouse-nav-button.png);
}

@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);
}

/* ── Control hierarchy + dead-column hide (P3 polish, 2026-06-28) ──────────────
   The realm selector is THE primary decision on the page (everything is realm-
   scoped) and the category tree is the primary navigation — so the realm select
   gets a gold accent to draw the eye, while Export (a utility, not navigation)
   is muted so it stops out-shouting them. SEARCH stays loud — it's the primary
   action. See docs/sections/economy + the usability pass. */
.ah-realm-select {
  border-color: var(--ah-gold-soft);
  color: var(--ah-gold);
  font-weight: 700;
}
.ah-realm-select:focus {
  outline: 2px solid var(--ah-gold);
  outline-offset: 1px;
}

/* Export → quiet utility button: drop the gold text + bright first-letter accent
   that the other filter buttons (Deals / Market Share, which ARE navigation) keep. */
#ahExportButton {
  color: var(--ah-text);
  font-weight: 600;
  background: var(--wgf-panel-2);
}
#ahExportButton::first-letter { color: inherit; }

/* 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) */
.ah-cat-row--all-items {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 800;
  color: var(--ah-gold-soft);
  background: var(--wgf-panel-1);
  border-radius: 4px;
  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 collapsed dropdown look (ig-51/62): inset near-black
   field, gold Friz label, the real red-tabbed kit arrow. Native behaviour untouched
   (appearance:none only strips the OS arrow; the popup list stays the OS picker). */
.ah-control.ah-realm-select,
.ah-control.ah-sort-select {
  appearance: none;
  -webkit-appearance: none;
  height: var(--wgf-dropdown-h, 34px);
  padding: 0 34px 0 12px;
  border: 1px solid var(--wgf-well-edge);
  border-radius: 4px;
  background:
    url(/assets/ui/auctionhouse-ui-dropdown-arrow-down.png) right 8px center / auto 16px no-repeat,
    var(--wgf-well);
  color: var(--wgf-gold, #f0c040);
  font-family: var(--font-game);
  font-weight: 600;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7);
}
.ah-control.ah-realm-select:focus,
.ah-control.ah-sort-select:focus {
  outline: none;
  box-shadow: var(--focus-ring), inset 0 2px 5px rgba(0, 0, 0, 0.7);
}
/* the OS-drawn option list: force readable dark rows where the browser honours it */
.ah-realm-select option,
.ah-sort-select option { background: #0c0c0f; color: var(--wgf-text); }

/* Search field -> the inset near-black AH input (ig-62). */
.wgf-window .ah-searchbox {
  height: var(--wgf-dropdown-h, 34px);
  border: 1px solid var(--wgf-well-edge);
  border-radius: 4px;
  background: var(--wgf-well);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7);
}
.wgf-window .ah-searchbox span { color: var(--wgf-gold-muted, #caa24e); }
.wgf-window .ah-searchbox input { color: var(--wgf-text); font-family: var(--font-ui); }
.wgf-window .ah-searchbox:focus-within {
  box-shadow: var(--focus-ring), inset 0 2px 5px rgba(0, 0, 0, 0.7);
}

/* Market Share / Export / Tracked -> secondary in-game button treatment
   (off-theme gray killed 2026-07-30). Dark panel background, metal border,
   small inset shadow, gold text - visually consistent with AH chrome, NOT
   bright gray. Real auctionhouse-nav-button PNG removed. */
.wgf-window .ah-filter-button {
  height: var(--wgf-dropdown-h, 34px);
  border: 1px solid var(--wgf-well-edge);
  border-radius: 0; /* squared - game chrome, no rounded corners */
  background: var(--wgf-panel-1);
  color: var(--wgf-gold-muted, #caa24e);
  font-family: var(--font-game);
  font-variant: small-caps;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  padding: 0 var(--space-2);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}
.wgf-window .ah-filter-button::first-letter { color: var(--wgf-gold-bright, #ffd76a); }
.wgf-window .ah-filter-button:hover:not(:disabled):not(.disabled) {
  background: var(--wgf-panel-2);
  color: var(--wgf-gold-bright, #ffd76a);
}

/* 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): grey gradient plate, gold small-caps
   label, rounded top. Sort behaviour + arrows are unchanged (same .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: 1px solid var(--wgf-metal-soft);
  border-bottom: 0;
  border-radius: 4px 4px 0 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.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: 4px; }
.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: 4px;
  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) at 10px. The native
   white/silver horizontal scrollbar on .ah-table-shell was out-of-place on the
   dark stone UI. Apply this class to any overflow container that must scroll.
   Firefox: scrollbar-color/width; WebKit/Blink: ::-webkit-scrollbar family.
   ============================================================================= */
.wgf-scroll,
.ah-range-tabs {
  scrollbar-width: thin;
  scrollbar-color: #8b7236 #0d0d08;
}
.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;
}