/* wgf-toys.css -- the /toys/ hub and /toy/<slug>/ detail page.
   Owned by the page:toys lane (2026-09-03). Linked through toy_app's extra_css only, so
   nothing here can reach another family's page.

   Why this file exists: the detail page's "Details" grid shipped with the class names
   .wgf-facts-grid / .wgf-fact / .wgf-fact__k / .wgf-fact__v, and NO stylesheet a /toy/ 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 on 2026-09-03). The panel was
   three unstyled lines of text. This sheet gives the rebuilt panel its own namespaced
   classes so it can never collide with those two sheets.

   Palette: tokens from static/css/_tokens.css (near-black slate plates, bronze/gold rules,
   parchment text) with the raw in-game hex as the fallback. No gradients, no glows, no
   green -- item quality colours come from wgf-item-card.css's q-* ladder, which is the only
   place green (#1eff00, uncommon) is allowed. */

/* -- source badge (hub filter buttons + the Source fact row) ---------------------------- */

.wgf-toy-badge {
  display: inline-block;
  vertical-align: -3px;
  margin-right: 6px;
  border: 1px solid var(--wgf-border, rgba(183, 145, 47, 0.35));
  border-radius: 2px;
  background: var(--wgf-bg-2, #0d0f14);
  image-rendering: auto;
}

.rd-type-btn__label {
  vertical-align: middle;
}

/* -- detail: the hero eyebrow (source icon + "<Source> Toy") ---------------------------- */
/* Same shape as .wgf-bp-eyebrow in wgf-battle-pets.css, the family reference for an entity
   hero that leads with the client's own icon for the acquisition path. Flex, so the badge's
   vertical-align nudge (set for inline runs of text on the hub's filter buttons) is
   neutralised and the icon sits on the label's centre line. */

.wgf-toy-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.wgf-toy-eyebrow .wgf-toy-badge {
  margin-right: 0;
  vertical-align: baseline;
}

/* -- detail: the facts panel ------------------------------------------------------------ */

.wgf-toy-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-toy-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: var(--wgf-panel, #14161c);
}

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

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

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

.wgf-toy-facts__tech {
  margin-top: 10px;
}

.wgf-toy-facts__techk {
  margin: 0 0 4px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wgf-muted, #9d9d9d);
}

/* The technical group reads as trivia, not as a headline fact. */
.wgf-toy-facts__tech .wgf-toy-facts {
  border-color: var(--wgf-border, rgba(183, 145, 47, 0.20));
}

.wgf-toy-fact--tech {
  background: var(--wgf-bg-2, #0d0f14);
}

.wgf-toy-fact--tech .wgf-toy-fact__v {
  color: var(--wgf-muted, #9d9d9d);
}

/* -- detail: flavour line --------------------------------------------------------------- */

.wgf-toy-flavor {
  margin: 8px 0 0;
  font-style: italic;
  color: var(--wgf-gold-muted, #b7912f);
}

/* -- detail: the item line -------------------------------------------------------------- */

.wgf-toy-itemlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  text-decoration: none;
}

.wgf-toy-itemlink:hover,
.wgf-toy-itemlink:focus-visible {
  text-decoration: underline;
}

/* -- hub: quality-coloured tile names --------------------------------------------------- */
/* wgf-ag-card.css sets .wgf-ag-card__name to one flat gold, and it is loaded AFTER
   wgf-item-card.css, so a bare .q-rare on the tile name loses the cascade at equal
   specificity. These two-class selectors (0,2,0) let the game's own quality ladder win.
   The hex values are never written here: --q-* are the tokens wgf-item-card.css reads. */

.wgf-ag-card__name.q-poor      { color: var(--q-poor); }
.wgf-ag-card__name.q-common    { color: var(--q-common, #ffffff); }
.wgf-ag-card__name.q-uncommon  { color: var(--q-uncommon); }
.wgf-ag-card__name.q-rare      { color: var(--q-rare); }
.wgf-ag-card__name.q-epic      { color: var(--q-epic); }
.wgf-ag-card__name.q-legendary { color: var(--q-legendary); }
.wgf-ag-card__name.q-artifact  { color: var(--q-artifact); }
.wgf-ag-card__name.q-heirloom  { color: var(--q-heirloom); }

/* -- detail: the depth layer (2026-09-17, lane depth:toys) ------------------------------ */
/* toy_depth_render's sections. They reuse .wgf-toy-facts for every labelled number, so the
   only rules here are the prose pieces that grid does not cover: the buff line the client
   prints while the effect is up, the spell a toy chains into, and the achievement block.
   No new colour tokens: all four are the sheet's existing --wgf-* variables. */

.wgf-toy-depth__spell + .wgf-toy-depth__spell {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--wgf-border, rgba(183, 145, 47, 0.22));
}

.wgf-toy-depth__h3 {
  margin: 0 0 6px;
  font-size: 1.02rem;
  color: var(--wgf-gold-primary, #ffd100);
}

.wgf-toy-depth__aura,
.wgf-toy-depth__reward {
  margin: 8px 0;
  color: var(--wgf-text, #f4ecd8);
}

.wgf-toy-depth__aurak {
  margin-right: 6px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wgf-muted, #9d9d9d);
}

.wgf-toy-depth__trig {
  margin-top: 10px;
}

.wgf-toy-depth__trigk {
  margin: 0 0 4px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wgf-muted, #9d9d9d);
}

.wgf-toy-depth__triglist {
  margin: 0;
  padding-left: 18px;
}

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

.wgf-toy-depth__trigtext {
  color: var(--wgf-muted, #9d9d9d);
}

.wgf-toy-depth__achlist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wgf-toy-depth__ach + .wgf-toy-depth__ach {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--wgf-border, rgba(183, 145, 47, 0.22));
}

.wgf-toy-depth__achk {
  margin: 0 0 4px;
  font-weight: 600;
}

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

.wgf-toy-depth__pts {
  font-size: 0.82rem;
  color: var(--wgf-muted, #9d9d9d);
}