/* wgf-quests - the QUEST family sheet (/quests/ index + /quest/<slug>-<id>/).

   Everything the 2026-09-03 Blizzard-asset pass added to quest_app, and nothing else:

     .wgf-qst-art       the index header band - one extracted loading screen
     .wgf-qst-glyph     the quest's identity art seated in a bronze plate
     .wgf-qst-item      a reward / start item: quality frame + hooked, coloured link
     .wgf-qst-alpha     the A-Z jump nav over one page of the index
     .wgf-qst-group     one letter block of that index
     .wgf-refpager      the index pager (moved out of an inline <style> in quest_app)

   Kit first, per docs/ui-ux/18-blizzard-asset-kit.md: the item frame itself is
   .wgf-qborder from assets/wgf-chrome.css (the real auctionhouse-itemicon-border
   nine-slice), the cards are .wgf-ag-card, the map figures are .wgf-worldmap. Nothing
   here re-themes anything those sheets own.

   Palette: docs/ui-ux/17-blizzard-palette.md tokens only - slate plates, bronze rules,
   gold headings, parchment text. No gradients, no glows, no green chrome. The single
   green literal below is --q-uncommon on an UNCOMMON item name, which is Blizzard
   semantics and on the green-purge keep-list.
   ========================================================================= */

/* -----------------------------------------------------------------------------
   Index header art. A real extracted loading screen (assets/loading-screens/),
   resolved by wgf_zonebg and CREDITED by wgf_zonebg.wallpaper_strip_html at the foot
   of the page - this rule only frames it. Fixed height so the band never reflows the
   list while the image decodes; no art resolved means quest_render emits nothing and
   these rules never apply.
   --------------------------------------------------------------------------- */
.wgf-qst-art {
  margin: 0 0 var(--space-4);
  border: 1px solid var(--wgf-metal);
  background: var(--wgf-well);
  overflow: hidden;
}

.wgf-qst-art__img {
  display: block;
  width: 100%;
  height: clamp(110px, 20vw, 230px);
  object-fit: cover;
  object-position: center 40%;
}

.wgf-qst-art__cap {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--wgf-metal);
  background: var(--wgf-panel-1);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--wgf-muted);
}

/* -----------------------------------------------------------------------------
   The detail hero: the quest's identity art beside its name. The glyph is the reward
   or start item's own icon when the quest has one, else the client's quests-completed
   icon - deliberately in a plain bronze plate, NOT a quality frame, because the frame
   states an item's quality and the quest is not that item.
   --------------------------------------------------------------------------- */
.wgf-qst-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.wgf-qst-glyph {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  padding: 2px;
  border: 1px solid var(--wgf-gold-accent);
  background: var(--wgf-well);
}

.wgf-qst-glyph img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
}

/* The client's title face where it is available. --font-game is the site token; on a
   shell page the woff2 faces are not linked yet (they are declared only in
   assets/wgf-game-skin.css, which restyles <body> and so cannot be pulled in here), so
   this resolves to the token's serif fallback until that lift lands. */
.wgf-qst-head .wgf-seo-h1 {
  font-family: var(--font-game);
  margin: 0;
}

/* -----------------------------------------------------------------------------
   Item rows: rewards, and the item that starts a quest. The 44px ring is
   .wgf-qborder (wgf-chrome.css); these rules seat it beside the linked name and give
   the name its quality colour. The link itself, hook included, is built by
   seo_links.item_link - never here.
   --------------------------------------------------------------------------- */
.wgf-qst-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.wgf-qst-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 8px;
  border: 1px solid var(--wgf-border-neutral-soft);
  background: var(--wgf-panel-1);
}

.wgf-qst-item .wgf-qborder {
  flex: 0 0 auto;
}

.wgf-qst-item__text {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
}

.wgf-qst-item__name {
  font-family: var(--font-game);
  text-decoration: none;
}

.wgf-qst-item__name:hover,
.wgf-qst-item__name:focus-visible {
  text-decoration: underline;
}

.wgf-qst-item__qty,
.wgf-qst-item__note {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--wgf-muted);
}

/* The item-quality scale, scoped to this family's own rows. Values are the client's,
   from static/css/_tokens.css - the uncommon green is Blizzard semantics (green-purge
   keep-list), never chrome. */
.wgf-qst-item__name.q-poor      { color: var(--q-poor); }
.wgf-qst-item__name.q-common    { color: var(--q-common); }
.wgf-qst-item__name.q-uncommon  { color: var(--q-uncommon); }
.wgf-qst-item__name.q-rare      { color: var(--q-rare); }
.wgf-qst-item__name.q-epic      { color: var(--q-epic); }
.wgf-qst-item__name.q-legendary { color: var(--q-legendary); }
.wgf-qst-item__name.q-artifact  { color: var(--q-artifact); }

/* An item icon riding inside an objective sentence (seo_links.item_icon_img emits
   .wgf-icon; this only stops it dropping below the text baseline). */
.wgf-qst-obj .wgf-icon {
  vertical-align: text-bottom;
  margin-right: 4px;
}

/* -----------------------------------------------------------------------------
   The index: an A-Z jump nav over one 500-row page, then one labelled block per
   letter. Every row keeps the plain <a href> a crawler follows.
   --------------------------------------------------------------------------- */
.wgf-qst-alpha {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 var(--space-3);
  padding: var(--space-2);
  border: 1px solid var(--wgf-border-neutral-soft);
  background: var(--wgf-panel-1);
}

.wgf-qst-alpha a {
  min-width: 26px;
  padding: 2px 6px;
  border: 1px solid var(--wgf-metal-soft);
  background: var(--wgf-well);
  color: var(--wgf-gold-primary);
  font-family: var(--font-game);
  font-size: var(--text-sm);
  text-align: center;
  text-decoration: none;
}

.wgf-qst-alpha a:hover,
.wgf-qst-alpha a:focus-visible {
  border-color: var(--wgf-gold-accent);
  color: var(--wgf-gold-bright);
}

.wgf-qst-group + .wgf-qst-group {
  margin-top: var(--space-3);
}

.wgf-qst-group__head {
  margin: 0 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--wgf-metal-soft);
  font-family: var(--font-game);
  font-size: 1rem;
  color: var(--wgf-gold-primary);
}

/* A letter block whose every row is filtered out hides its heading too, so the
   client-side filter never leaves an empty "K" standing on its own. */
.wgf-qst-group[hidden] {
  display: none;
}

/* -----------------------------------------------------------------------------
   The index pager. Moved here verbatim from the inline <style> quest_app used to
   write into the shell (shell output stays brace-free - asset kit section 2.11).
   --------------------------------------------------------------------------- */
.wgf-refpager {
  margin: 1.4rem 0 0;
}

.wgf-refpager__count {
  margin: 0 0 .55rem;
  font-size: .88rem;
}

/* -----------------------------------------------------------------------------
   The quest chain as a navigable series (quest_render.chain_section_html).
   A previous/next pair, then every step of the chain numbered in order with the
   current one marked. Tokens only, no gradients, no glows, no green.
   --------------------------------------------------------------------------- */
.wgf-qst-chainnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.wgf-qst-chainnav__link {
  flex: 1 1 220px;
  display: block;
  padding: var(--space-2);
  border: 1px solid var(--wgf-metal-soft);
  background: var(--wgf-well);
  text-decoration: none;
}

.wgf-qst-chainnav__link:hover,
.wgf-qst-chainnav__link:focus-visible {
  border-color: var(--wgf-gold-accent);
}

.wgf-qst-chainnav__link--prev {
  text-align: left;
}

.wgf-qst-chainnav__link--next {
  text-align: right;
}

.wgf-qst-chainnav__dir {
  display: block;
  font-size: var(--text-sm);
  color: var(--wgf-muted);
}

.wgf-qst-chainnav__name {
  display: block;
  font-family: var(--font-game);
  color: var(--wgf-gold-primary);
}

.wgf-qst-chainnav__link:hover .wgf-qst-chainnav__name,
.wgf-qst-chainnav__link:focus-visible .wgf-qst-chainnav__name {
  color: var(--wgf-gold-bright);
}

.wgf-qst-chain {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  border: 1px solid var(--wgf-border-neutral-soft);
  background: var(--wgf-panel-1);
}

.wgf-qst-step {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 6px var(--space-2);
}

.wgf-qst-step + .wgf-qst-step {
  border-top: 1px solid var(--wgf-metal-soft);
}

.wgf-qst-step__n {
  flex: 0 0 auto;
  min-width: 1.6em;
  font-family: var(--font-game);
  font-size: var(--text-sm);
  color: var(--wgf-muted);
  text-align: right;
}

.wgf-qst-step__name {
  text-decoration: none;
  color: var(--wgf-gold-primary);
}

a.wgf-qst-step__name:hover,
a.wgf-qst-step__name:focus-visible {
  color: var(--wgf-gold-bright);
  text-decoration: underline;
}

/* The step you are standing on: marked by weight and the metal rail, never a link. */
.wgf-qst-step--current {
  border-left: 3px solid var(--wgf-gold-accent);
  background: var(--wgf-well);
}

.wgf-qst-step--current .wgf-qst-step__name {
  color: var(--wgf-gold-bright);
  font-family: var(--font-game);
}

/* A step the build does not name. It holds its place in the sequence and says so
   in words; its database id is never printed. */
.wgf-qst-step--unnamed .wgf-qst-step__name {
  color: var(--wgf-muted);
  font-style: italic;
}

/* The Quest facts grid and the Rewards ledger (quest_app facts_html / _rewards_html) use
   .wgf-facts-grid / .wgf-fact, which are declared only in sheets this family never links
   (wgf-farming.css, wgf-housing-builder.css, ...), so a label and its value ran together as
   unstyled text: "Quest ID42593" (seen 2026-09-11, the defect the titles and creature-family
   lanes fixed the same way). Same ledger look as .wgf-world-facts in wgf-world.css. */
.wgf-facts-grid {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--space-2);
}

.wgf-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--wgf-metal-soft);
}

.wgf-fact:last-child {
  border-bottom: 0;
}

.wgf-fact__k {
  flex: 0 0 auto;
  color: var(--wgf-gold-muted);
  font-family: var(--font-game);
  font-size: var(--text-sm);
  font-variant: small-caps;
  letter-spacing: 0.03em;
}

.wgf-fact__v {
  flex: 1 1 auto;
  text-align: right;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
