/* wgf-cheapest-realm.css - the Blizzard-asset layer for /cheapest-realm/.
 *
 * Scope: only what assets/cheapest-realm.css (the tool chrome) and
 * assets/wgf-cheapest-board.css (the default board) do not already own -
 *   .crx-h1 / .crx-mark   the page mark: an in-game coin in the neutral crafting-slot frame
 *   .crx-*                the deep link's server-rendered item panel (/cheapest-realm/<slug>/)
 *
 * Palette tokens only (docs/ui-ux/17-blizzard-palette.md): slate panels, bronze rules, gold
 * headings, parchment body, --q-* for item quality. No gradients, no glows, no green chrome:
 * the only green here is --q-uncommon on an uncommon item name, which is the client's own.
 * Frames come from assets/ui/ (verified on disk); quality rings come from wgf-chrome.css.
 */

/* ── the page mark ─────────────────────────────────────────────────────────────────── */
.crx-h1 { display: flex; align-items: center; gap: .7rem }

.crx-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; flex: 0 0 auto;
  background-image: url(/assets/ui/professions-slot-frame.png);
  background-size: 100% 100%; background-repeat: no-repeat;
}
.crx-mark > img { width: 40px; height: 40px; display: block; border-radius: 2px }
.crx-mark--lg { width: 66px; height: 66px }
.crx-mark--lg > img { width: 48px; height: 48px }

@media (max-width: 640px) {
  .crx-mark { width: 44px; height: 44px }
  .crx-mark > img { width: 30px; height: 30px }
}

/* ── the deep link's item panel ────────────────────────────────────────────────────── */
.crx {
  margin: 1.6rem 0 2rem; padding: 1.1rem 1.15rem 1.25rem;
  background: var(--wgf-panel-1, #14161c);
  border: 1px solid var(--wgf-metal, #6e5a2a);
  border-radius: 4px;
}

.crx-head { display: flex; align-items: flex-start; gap: .95rem; margin-bottom: .85rem }
.crx-head__ic { flex: 0 0 auto; line-height: 0 }
.crx-head__id { min-width: 0 }

.crx-name { margin: 0 0 .5rem; font-size: 1.45rem; line-height: 1.2; font-weight: 600 }
.crx-name a { color: inherit; text-decoration: none }
.crx-name a:hover { text-decoration: underline }
.crx-name.q0 a, .crx-q0 { color: var(--q-poor, #9d9d9d) }
.crx-name.q1 a, .crx-q1 { color: var(--q-common, #ffffff) }
.crx-name.q2 a, .crx-q2 { color: var(--q-uncommon, #1eff00) }
.crx-name.q3 a, .crx-q3 { color: var(--q-rare, #0070dd) }
.crx-name.q4 a, .crx-q4 { color: var(--q-epic, #a335ee) }
.crx-name.q5 a, .crx-q5 { color: var(--q-legendary, #ff8000) }
.crx-name.q6 a, .crx-q6 { color: var(--q-artifact, #e6cc80) }
.crx-name.q7 a, .crx-q7 { color: var(--q-heirloom, #00ccff) }
.crx-name:not([class*=" q"]) a { color: var(--wgf-gold-link, #ffe375) }

.crx-facts { display: flex; flex-wrap: wrap; gap: .35rem .9rem }
.crx-fact { display: flex; align-items: baseline; gap: .4rem; font-size: .95rem }
.crx-fact__l { color: var(--wgf-muted, #b3a88f) }
.crx-fact__v { color: var(--wgf-text, #f4ecd8) }

.crx-lead { margin: 0 0 .9rem; color: var(--wgf-text, #f4ecd8); line-height: 1.55 }
.crx-lead strong { color: var(--wgf-gold, #ffd100); font-weight: 600 }
.crx-fresh { display: block; margin-top: .3rem; font-size: .88rem; color: var(--wgf-muted, #b3a88f) }

.crx-table { width: 100%; border-collapse: collapse; font-size: .97rem }
.crx-cap {
  caption-side: top; text-align: left; padding: 0 0 .45rem;
  color: var(--wgf-gold-muted, #b5a06a); font-size: .88rem;
  letter-spacing: .06em; text-transform: uppercase;
}
.crx-table th {
  text-align: left; padding: .35rem .55rem; font-weight: 600;
  color: var(--wgf-gold-muted, #b5a06a);
  border-bottom: 1px solid var(--wgf-metal, #6e5a2a);
}
.crx-table td { padding: .42rem .55rem; border-bottom: 1px solid var(--wgf-border-neutral-soft, #202229) }
.crx-table tbody tr:last-child td { border-bottom: 0 }
.crx-table tbody tr:nth-child(odd) td { background: var(--wgf-well, #08090c) }

.crx-rank { width: 2.2rem; color: var(--wgf-muted, #b3a88f); font-variant-numeric: tabular-nums }
.crx-realm a { color: var(--wgf-gold-link, #ffe375); text-decoration: none }
.crx-realm a:hover { text-decoration: underline }
.crx-pop { margin-left: .5rem; color: var(--wgf-muted, #b3a88f); font-size: .85rem }
.crx-price, .crx-qty { white-space: nowrap; font-variant-numeric: tabular-nums }
.crx-qty { text-align: right; color: var(--wgf-muted, #b3a88f) }

.crx-more { margin: .95rem 0 0; color: var(--wgf-muted, #b3a88f); font-size: .93rem }
.crx-more a { color: var(--wgf-gold-link, #ffe375) }

@media (max-width: 640px) {
  .crx { padding: .9rem .8rem 1rem }
  .crx-name { font-size: 1.2rem }
  .crx-table { font-size: .9rem }
  .crx-table th:last-child, .crx-table td:last-child { display: none }
}

/* ── the board's hub -> detail edge (rendered inside .crb-item by cheapest_realm_board) ── */
.crb-item a.crb-deep {
  display: inline-block; margin-left: .55rem;
  color: var(--wgf-gold-muted, #b5a06a);
  font-size: .82rem; font-weight: 400; white-space: nowrap;
  text-decoration: none; border-bottom: 1px dotted var(--wgf-metal, #6e5a2a);
}
.crb-item a.crb-deep:hover { color: var(--wgf-gold-bright, #ffe375); border-bottom-color: currentColor }

/* ── the deep link's cohort rail ───────────────────────────────────────────────────── */
.crx-rel { margin: 1.4rem 0 }
.crx-rel__list { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0 0; padding: 0; list-style: none }
.crx-rel__i a {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .6rem; text-decoration: none;
  background: var(--wgf-panel-1, #14161c);
  border: 1px solid var(--wgf-metal, #6e5a2a); border-radius: 3px;
}
.crx-rel__i a:hover { border-color: var(--wgf-gold-dim, #8a7440) }
.crx-rel__ic { width: 24px; height: 24px; display: block; border-radius: 2px }