/* 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.) */
.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 -> the game-chrome nav-button idiom (ig-63):
   real auctionhouse-nav-button textures (base, highlight, select states). Gold
   small-caps label. Disabled (Tracked Items "soon") stays visibly dimmed. */
.wgf-window .ah-filter-button {
  height: var(--wgf-dropdown-h, 34px);
  border: 0;
  border-radius: 0;
  background: url(/assets/ui/auctionhouse-nav-button.png) no-repeat center / 100% 100%;
  color: var(--wgf-text, #f4ecd8);
  font-family: var(--font-game);
  font-variant: small-caps;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  padding: 0 var(--space-2);
}
.wgf-window .ah-filter-button::first-letter { color: var(--ah-gold); }
.wgf-window .ah-filter-button:hover:not(:disabled):not(.disabled) {
  background-image: url(/assets/ui/auctionhouse-nav-button-highlight.png);
  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;
}