/* wgf-quest-frame - the QUEST page as the client's Quest Log (lane ingame-quests 2026-10-10).

   Owner ruling 2026-10-10 (docs/standards/WIKI_PAGE_STANDARD.md §0): every page looks like it
   came straight out of the game; quests are the Quest Log. Markup: quest_frame.py.

     .wgf-qframe            the metal ButtonFrame window (the .wgf-window kit) with the
                            ButtonFramePortrait ring top-left holding the quest's icon
     .wgf-qframe__page      the QuestBG parchment page: QuestTitleFont (Morpheus) title and
                            section heads, QuestFont dark-ink body
     .wgf-qframe__ledger    the facts ledger beside the page, on the window's stone
     .wgf-qst-item          (on the page) a reward button: quality-framed icon + name plate
     .wgf-qpage             the page column: the wiki windows below the frame, and the
                            family's inner rows moved off plain bordered plates onto the
                            client inset frame (--wgf-inset-art, wgf-chrome.css)

   Art, all real client slices in /assets/ui: ui-frame-portraitmetal-cornertopleft-2x,
   questbg-parchment, petlist-buttonbackground (name plate; the client's
   UI-QuestItemNameFrame is not in the repo), auctionhouse-icon-coin-*, spellbook-divider.
   No gradients, no glows, no drawn frames. Dark ink values are the parchment scope already
   used by wgf-chrome.css (.wgf-parchment-pane).
   ========================================================================= */

@font-face {
  font-family: "Morpheus";
  src: url("/assets/fonts/morpheus.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "FrizQT";
  src: url("/assets/fonts/frizqt.woff2") format("woff2");
  font-display: swap;
}

.wgf-qpage > .wgf-window { margin: 0 0 var(--space-5); }

/* ---------------------------------------------------------------------------
   The window. Same kit as every .wgf-window; only the top-left corner differs:
   the portrait ring (150px 2x art at the kit's 0.8 scale = 120px). The ring is
   drawn by .wgf-qframe__portrait::after ABOVE the icon, exactly as the client
   layers the portrait texture under PortraitFrame.
   --------------------------------------------------------------------------- */
.wgf-qframe {
  position: relative;
  margin-top: var(--space-3);
}
.wgf-qframe__portrait {
  position: absolute;
  left: -13px;
  top: -16px;
  width: 120px;
  height: 120px;
  z-index: 2;
  pointer-events: none;
}
.wgf-qframe__portrait img {
  position: absolute;
  left: 18px;
  top: 18px;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  object-fit: cover;
}
.wgf-qframe__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(/assets/ui/ui-frame-portraitmetal-cornertopleft-2x.png) left top / 120px 120px no-repeat;
}
/* the band starts past the ring, as the title of a portrait frame does */
.wgf-qframe > .wgf-qframe__band {
  border-inline-start-width: 104px;
}

.wgf-qframe__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  padding-top: 56px;          /* clears the portrait ring's overhang */
}
@media (min-width: 960px) {
  .wgf-qframe__body {
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem);
    align-items: start;
  }
}

/* ---------------------------------------------------------------------------
   The parchment page (QuestBG). The client stretches the page texture to the
   scroll frame; so does this. Dark ink on paper: the legibility contract
   inverts here, so the text tokens are re-scoped.
   --------------------------------------------------------------------------- */
.wgf-qframe__page {
  --wgf-text: #2c1d0b;
  --wgf-muted: #5a4024;
  --wgf-gold: #000;
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  padding: 26px 30px 32px 28px;
  background: url(/assets/ui/achv/piece-parchment-page.png) center top / 100% auto repeat-y;  /* tiled client parchment: the torn questbg slice stretched over long text hid the opening lines */
  color: #2c1d0b;
  font-family: "FrizQT", var(--font-game), serif;
  font-size: 1rem;
  line-height: 1.6;
  text-shadow: none;
}
.wgf-qframe__page .wgf-qframe__title {
  margin: 0 0 var(--space-2);
  color: #000;
  font-family: "Morpheus", var(--font-game-display), serif;
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  font-weight: 400;
  font-variant: normal;
  letter-spacing: 0;
  line-height: 1.2;
  text-shadow: none;
}
.wgf-qframe__page .wgf-qframe__h {
  margin: var(--space-4) 0 var(--space-2);
  padding: 0;
  border: 0;
  background: none;
  color: #000;
  font-family: "Morpheus", var(--font-game-display), serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.25;
  text-align: left;
  text-shadow: none;
}
.wgf-qframe__lead,
.wgf-qframe__text { margin: 0 0 var(--space-3); color: #2c1d0b; }
.wgf-qframe__tok { color: #5a2a00; }
.wgf-qframe__page a { color: #7a3f10; text-decoration: underline; text-underline-offset: 2px; }
.wgf-qframe__page a:hover { color: #000; }
.wgf-qframe__objs { margin: 0 0 var(--space-3); padding-left: 1.2rem; }
.wgf-qframe__objs li { margin: 0 0 var(--space-1); }
.wgf-qframe__objs a[class*="q-"] { color: #7a3f10; }

/* Rewards on the page: the client's own header lines, then reward buttons. */
.wgf-qframe__page .wgf-qenr-choice {
  margin: var(--space-2) 0;
  color: #2c1d0b;
}
.wgf-qframe__page .wgf-qst-items {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}
@media (min-width: 560px) {
  .wgf-qframe__page .wgf-qst-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.wgf-qframe__page .wgf-qst-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 52px;
  margin: 0;
  padding: 4px 10px 4px 4px;
  border: 0;
  border-radius: 0;
  background: url(/assets/ui/petlist-buttonbackground.png) left center / 100% 100% no-repeat;
  color: #f4ecd8;
}
.wgf-qframe__page .wgf-qst-item a { text-decoration: none; }
.wgf-qframe__page .wgf-qst-item a:not([class*="q-"]) { color: #ffd100; }
.wgf-qframe__page .wgf-qst-item__note,
.wgf-qframe__page .wgf-qst-item__qty { color: #d8ccb0; }
.wgf-qframe__page .wgf-world-facts {
  padding: 0;
  background: none;
  border: 0;
}
.wgf-qframe__page .wgf-world-facts__row {
  justify-content: flex-start;
  padding: var(--space-1) 0;
  border-bottom: 0;
  background: none;
}
.wgf-qframe__page .wgf-world-facts__label { color: #000; min-width: 7.5rem; }
.wgf-qframe__page .wgf-world-facts__value { color: #2c1d0b; text-align: left; }
.wgf-qframe__money { display: inline-flex; gap: .5rem; align-items: center; }
.wgf-qframe__coin { display: inline-flex; gap: 2px; align-items: center; }
.wgf-qframe__coin img { width: 14px; height: 14px; }

/* ---------------------------------------------------------------------------
   The ledger on the window's stone: gold labels, parchment values, the
   spellbook divider between rows.
   --------------------------------------------------------------------------- */
.wgf-qframe__ledger { min-width: 0; }
.wgf-qframe__facts { margin: 0 0 var(--space-3); padding: 0; }
.wgf-qframe__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  background: url(/assets/ui/spellbook-divider.png) center bottom / 100% 6px no-repeat;
}
.wgf-qframe__k {
  color: var(--wgf-gold);
  font-family: "FrizQT", var(--font-game), serif;
  font-variant: small-caps;
  letter-spacing: .02em;
}
.wgf-qframe__v { margin: 0; color: var(--wgf-text); text-align: right; min-width: 0; }
.wgf-qframe__macro { display: grid; gap: var(--space-1); margin: var(--space-3) 0 0; font-size: var(--text-sm); }
.wgf-qframe__macro code { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------
   The family's inner rows (chain steps, depth cards, coordinate lists, chain
   nav, More Quests tiles, the zone-connection tiles) wear the client inset frame
   instead of a flat plate with a 1px outline.
   --------------------------------------------------------------------------- */
.wgf-qpage :is(.wgf-qst-chain, .wgf-qst-chainnav__link, .wgf-qst-step--current,
  .wgf-qdep-card, .wgf-qdep-steps, .wgf-qcoords__list, .wgf-qnz-tile, .wgf-ag-card,
  .wtd-related-links a) {
  border: 0;
  border-radius: 0;
  background: var(--wgf-inset-art);
  box-shadow: none;
}
.wgf-qpage .wgf-window .wgf-qst-item {
  border: 0;
  border-radius: 0;
  background: url(/assets/ui/petlist-buttonbackground.png) left center / 100% 100% no-repeat;
}

@media (max-width: 480px) {
  .wgf-qframe__page { padding: 20px 26px 26px 18px; }
  .wgf-qframe > .wgf-qframe__band { border-inline-start-width: 96px; }
}