/* wgf-heirlooms.css - /heirlooms/ + /heirloom/<slug>-<id>/ only.
   Loaded through heirloom_app's extra_css seam (heirloom_render.HEIRLOOM_CSS).

   Palette: tokens from static/css/_tokens.css only (slate panels, bronze rules, the
   --q-heirloom light blue the client paints heirloom item names). No green, no gradient,
   no glow. The one image is a real client nine-slice already shipped in assets/ui/:
   ui-hud-actionbar-iconframe.png (46x45, the action-bar slot frame). */

/* -- detail: the identity block when the datamine tooltip card is unavailable ------------- */

.wgf-hl-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.wgf-hl-hero__frame {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 57px;                       /* 46x45 native, scaled 1.26 - aspect kept */
  background-image: url(/assets/ui/ui-hud-actionbar-iconframe.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.wgf-hl-hero__icon {
  width: 44px;
  height: 44px;
  display: block;
}

.wgf-hl-hero__title {
  margin: 0;
  font-family: FrizQT, "Friz Quadrata TT", Georgia, "Times New Roman", serif;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: .01em;
}

/* Heirloom light blue - the client's own colour for this quality. Scoped so it can never
   repaint another family's card names. */
.wgf-hl-hero__title.q-heirloom,
.wgf-hl-grid .wgf-ag-card__name.q-heirloom {
  color: var(--q-heirloom, #00ccff);
}

/* -- hub + detail: the tile grid ---------------------------------------------------------- */

.wgf-hl-grid .wgf-ag-card__meta {
  color: var(--wgf-neutral-text, #9b9384);
}

/* -- detail: the zone map figure sits on the same bronze rule as the page's panels -------- */

.wgf-hl-mapnote {
  color: var(--wgf-muted, #b3a88f);
  margin: 6px 0 0;
}

/* -- hub: the slot filter row -------------------------------------------------------------- */

.wgf-hl-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}

.wgf-hl-slots__btn {
  font: inherit;
  color: var(--wgf-text, #f4ecd8);
  background: var(--wgf-panel-1, #14161c);
  border: 1px solid var(--wgf-metal, #6e5a2a);
  border-radius: 2px;
  padding: 4px 10px;
  cursor: pointer;
}

.wgf-hl-slots__btn:hover,
.wgf-hl-slots__btn:focus-visible {
  border-color: var(--wgf-gold-accent, #b7912f);
  color: var(--wgf-gold-primary, #ffd100);
}

.wgf-hl-slots__btn[aria-pressed="true"] {
  border-color: var(--wgf-gold-accent, #b7912f);
  color: var(--wgf-gold-primary, #ffd100);
  background: var(--wgf-panel-2, #1a1d24);
}

/* -- detail: the fact panels (Details, Where to Buy) --------------------------------------
   Why these classes exist: the page shipped emitting .wgf-facts-grid / .wgf-fact /
   .wgf-fact__k / .wgf-fact__v, and NO stylesheet an /heirloom/ page links defines them --
   they live in wgf-farming.css and wgf-housing-builder.css, neither of which is loaded here
   (verified against the served bytes, 2026-09-03). The Details panel rendered as unstyled
   runs of text ("SlotTwo-Hand"). wgf-toys.css and wgf-titles.css exist for exactly this
   reason on their own families; this is the heirloom equivalent, namespaced so it can never
   collide with those sheets. Same plate/rule shape as wgf-toys.css so the two families read
   as one site. */

.wgf-hl-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px;
  background: var(--wgf-border, rgba(183, 145, 47, 0.22));
  border: 1px solid var(--wgf-border-strong, rgba(183, 145, 47, 0.38));
  border-radius: 3px;
}

.wgf-hl-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: var(--wgf-panel, #14161c);
}

.wgf-hl-fact__k {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wgf-muted, #9d9d9d);
  white-space: nowrap;
}

.wgf-hl-fact__v {
  margin: 0;
  text-align: right;
  color: var(--wgf-text, #f4ecd8);
}

.wgf-hl-fact__k a,
.wgf-hl-fact__v a {
  color: var(--wgf-gold-primary, #ffd100);
}

/* The Where to Buy panel names a vendor in the key column, so that column is a name, not a
   shouted label. */
.wgf-hl-facts--who .wgf-hl-fact__k {
  text-transform: none;
  font-size: 0.95rem;
  color: var(--wgf-text, #f4ecd8);
  white-space: normal;
}

/* -- detail: Stats by Level (heirloom_enrich_render.scaling_html) --------------------------
   A plain data table on the same plate + bronze rule as the fact panels. The wrapper scrolls
   sideways on a phone (the page body never does); the level column is the row header. */

.wgf-hl-scale {
  overflow-x: auto;
  margin: 8px 0 0;
  border: 1px solid var(--wgf-border-strong, rgba(183, 145, 47, 0.38));
  border-radius: 3px;
  background: var(--wgf-panel, #14161c);
}

.wgf-hl-scale__t {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm, 0.875rem);
}

.wgf-hl-scale__t th,
.wgf-hl-scale__t td {
  padding: 7px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--wgf-border, rgba(183, 145, 47, 0.20));
  color: var(--wgf-text, #f4ecd8);
}

.wgf-hl-scale__t thead th {
  background: var(--wgf-panel-2, #1a1d24);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wgf-muted, #b3a88f);
  white-space: nowrap;
}

.wgf-hl-scale__t tbody th {
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
}

.wgf-hl-scale__t tbody tr:last-child th,
.wgf-hl-scale__t tbody tr:last-child td {
  border-bottom: 0;
}

.wgf-hl-scale__num {
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wgf-hl-scale__t a {
  color: var(--wgf-gold-primary, #ffd100);
}

.wgf-hl-note {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: var(--wgf-muted, #b3a88f);
}

/* -- detail: Item Set bonuses (heirloom_enrich_render.set_html) ---------------------------- */

.wgf-hl-setlist {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.wgf-hl-setlist li {
  padding: 6px 0;
  border-bottom: 1px solid var(--wgf-border, rgba(183, 145, 47, 0.20));
  color: var(--wgf-text, #f4ecd8);
}

.wgf-hl-setlist li:last-child {
  border-bottom: 0;
}

.wgf-hl-setlist__n {
  color: var(--wgf-muted, #b3a88f);
}

.wgf-hl-setlist a {
  color: var(--wgf-gold-primary, #ffd100);
}

/* -- detail: Appearance (heirloom_enrich_render.look_html) ---------------------------------
   The shared-look cards name items of every quality; each name takes the client's own
   quality colour from the --q-* tokens, scoped to this block. */

.wgf-hl-look .wgf-ag-card__name.q-poor { color: var(--q-poor, #9d9d9d); }
.wgf-hl-look .wgf-ag-card__name.q-common { color: var(--q-common, #ffffff); }
.wgf-hl-look .wgf-ag-card__name.q-uncommon { color: var(--q-uncommon); }
.wgf-hl-look .wgf-ag-card__name.q-rare { color: var(--q-rare, #0070dd); }
.wgf-hl-look .wgf-ag-card__name.q-epic { color: var(--q-epic, #a335ee); }
.wgf-hl-look .wgf-ag-card__name.q-legendary { color: var(--q-legendary, #ff8000); }
.wgf-hl-look .wgf-ag-card__name.q-artifact { color: var(--q-artifact, #e6cc80); }
.wgf-hl-look .wgf-ag-card__name.q-heirloom { color: var(--q-heirloom, #00ccff); }

.wgf-hl-look .rd-section-caption a {
  color: var(--wgf-gold-primary, #ffd100);
}