/* ah-movers.css - the "furthest under market right now" strip on /wow-auction-house/.
   Rendered by ah_movers_render.py, baked by tools/bake_ah_movers.py.

   Layered on assets/ah/base.css: the strip is a real <table class="ah-table">, so the
   client's auctionhouse-rowstripe zebra, the 31px row height, the gold hover band and
   the .q-* quality ladder all come from there. Only what is specific to the strip lives
   here. Every colour is a token from /static/css/_tokens.css; every image path was
   verified with ls on 2026-09-03. No gradients, no glows, no green chrome. */

.wgf-ahm {
  max-width: 940px;
  margin: 0 auto var(--space-4);
  padding: 0 var(--space-3);
}

.wgf-ahm__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--wgf-gold-dark);
}

.wgf-ahm__head h2 {
  margin: 0;
  font-family: var(--font-game);
  font-size: var(--text-lg);
  line-height: 1.2;
  color: var(--wgf-gold);
}

/* The honest sentence: what the rows are, where they came from, when. Capped so it
   stays two lines on a desktop instead of stretching the full 940px. */
.wgf-ahm__note {
  flex: 1 1 340px;
  max-width: 62ch;
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--wgf-muted);
}

.wgf-ahm__shell {
  overflow-x: auto;
  border: 1px solid var(--wgf-border-neutral-soft);
  background: var(--wgf-panel-1);
}

.wgf-ahm__table {
  width: 100%;
  min-width: 640px;
}

/* Client order (ig-26): Price first in coin notation, then icon + quality-coloured
   name, then the numeric columns right. col-price/col-type/col-qty widths come from
   .ah-table in ah/base.css; only the column that sheet has never heard of is set here. */
.wgf-ahm__table .col-discount {
  width: 118px;
  text-align: right;
  white-space: nowrap;
}

.wgf-ahm__table .col-type {
  text-align: left;
}

.wgf-ahm__table .col-name {
  min-width: 0;
}

.wgf-ahm__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-weight: 700;
  text-decoration: none;
  /* colour is the .q-* class on the same element (assets/ah/base.css) */
}

.wgf-ahm__link:hover .wgf-ahm__name,
.wgf-ahm__link:focus-visible .wgf-ahm__name {
  text-decoration: underline;
}

/* The client's own AH item-icon frame at native scale: auctionhouse-itemicon-small-border
   is a 32x32 slice whose metal ring occupies 4px on each edge (measured from the alpha
   channel: the opaque band sits at px 2-3 and 28-31 on both axes). A 24px content box
   inside a 4px border-image therefore reproduces the client's frame 1:1, with no
   up- or down-scaling and no wrapper element to add to the markup. */
.wgf-ahm__icon {
  flex: 0 0 auto;
  box-sizing: content-box;
  width: 24px;
  height: 24px;
  background: #000;
  object-fit: cover;
  border: 4px solid transparent;
  border-image: url("/assets/ui/auctionhouse-itemicon-small-border.png") 4 / 4px stretch;
}

.wgf-ahm__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Market scope chip: squared well, game face - the deals board's .deals-src voice. */
.wgf-ahm__src {
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--font-game);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--wgf-muted);
  background: var(--wgf-panel-2);
  border: 1px solid var(--wgf-border-neutral-soft);
}

.wgf-ahm__disc {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--wgf-gold-bright);
}

.wgf-ahm__foot {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
}

.wgf-ahm__more {
  color: var(--wgf-gold-link);
}

/* Phone: the strip stops being a grid and becomes stacked plates, the same treatment
   .deals-table already uses under 720px. The header row is dropped and each cell
   carries its own label so nothing depends on a column position. */
@media (max-width: 720px) {
  .wgf-ahm__table { min-width: 0; }
  .wgf-ahm__table thead { display: none; }
  .wgf-ahm__table tbody { display: block; }
  .wgf-ahm__table td { display: block; width: auto; }
  .wgf-ahm__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    padding: var(--space-2);
    border-bottom: 1px solid var(--wgf-border-neutral-soft);
  }
  .wgf-ahm__table .col-price,
  .wgf-ahm__table .col-name { flex: 1 0 100%; }
  .wgf-ahm__table td {
    height: auto;
    padding: 1px 0;
    border-bottom: 0;
    text-align: left;
  }
  .wgf-ahm__table .col-name { order: -1; font-weight: 700; }
  .wgf-ahm__table .col-price { font-size: var(--text-md); }
  .wgf-ahm__table .col-type,
  .wgf-ahm__table .col-discount,
  .wgf-ahm__table .col-qty {
    display: inline-block;
    width: auto;
    margin-right: var(--space-2);
    font-size: var(--text-xs);
    color: var(--wgf-muted);
  }
}