/* wgf-ingame-world.css - the in-game layout for the WORLD families (lane ingame-npcs, 2026-10-10):
   /creature/ and /npc/ (Merchant / unit portrait frame), bosses + /dungeon/ (Adventure Guide),
   /zone/ (World Map frame), /npcs/, /zones/, /dungeons/ and /creature-family/ hubs.

   Owner rulings 2026-10-10 evening (docs/standards/WIKI_PAGE_STANDARD.md §0): every page looks
   like it came straight out of the game; 1:1 client UI art; NO blue cards. Every frame below is
   painted ONLY with real client slices already shipped in /assets/ui/:

     UIFrameMetal window   ui-frame-metal-corner{topleft,topright,bottomleft,bottomright}-2x,
                           !ui-frame-metal-edge{left,right}-2x, _ui-frame-metal-edge{top,bottom}-2x
     Portrait frame        ui-frame-portraitmetal-cornertopleft-2x (PortraitFrameTemplate: the
                           Merchant / Character frame corner that holds the unit portrait)
     Window body           classhall-stone-tile under the owner's dark wash (the kit's body)
     Inset (InsetFrame)    _UI-Frame-Inner{Top,Bot}Tile, !UI-Frame-Inner{Left,Right}Tile over
                           blizzard/background-marble (wgf-chrome.css --wgf-inset-art)
     Journal page          questbg-parchment (the Adventure Guide's encounter page paper)

   Why a stylesheet and not new markup: about forty section builders across npc_app, dungeons_app
   and zone_app emit <section class="wgf-section"><h2 class="section-heading">, and two of those
   apps are drifted against production (lane rule: not edited). Re-skinning the top-level section
   of the page column turns every one of them into the client window with zero template risk.
   The slice geometry is the kit's own (.wgf-window in wgf-chrome.css, 2x art at 0.8); it is
   restated here because the kit file is shared and cannot be edited from a family lane.

   Loaded only by these families (npc_app extra_css, dungeon_enrich_render.page_blocks css,
   zone_enrich_render.css_hrefs, creature_family_app). No ?v in the href: seo_kit._wgf_asset
   stamps the file mtime, so no ASSET_VERSION bump is owed. Palette tokens only; no green
   chrome; no gradients except the kit's own dark wash over the stone. */

/* ---------------------------------------------------------------------------------------
   1. Every top-level page section = the client metal window.
   :is(.wgf-shell-page main, main) lifts specificity over the theme's
   `.wgf-shell-page main :is(.wgf-section, ...)` (0,2,1) without depending on the body class.
   --------------------------------------------------------------------------------------- */
:is(.wgf-shell-page main, main) .wgf-seo-main > .wgf-section,
:is(.wgf-shell-page main, main) .wgf-seo-main > .wgf-ig-frame {
  position: relative;
  box-sizing: border-box;
  margin: var(--space-4) 0 0;
  padding: 0 var(--space-4) var(--space-5);
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(rgba(0, 0, 0, 0.44), rgba(0, 0, 0, 0.44)),
    url(/assets/ui/classhall-stone-tile.png) left top / 256px 256px repeat,
    var(--wgf-plate);
  box-shadow: var(--shadow-2);
  color: var(--wgf-text);
}
:is(.wgf-shell-page main, main) .wgf-seo-main > .wgf-section::before,
:is(.wgf-shell-page main, main) .wgf-seo-main > .wgf-ig-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    url(/assets/ui/ui-frame-metal-cornertopleft-2x.png)      left  -19px top    -26px / 120px 120px no-repeat,
    url(/assets/ui/ui-frame-metal-cornertopright-2x.png)     right  -9px top    -26px / 120px 120px no-repeat,
    url(/assets/ui/ui-frame-metal-cornerbottomleft-2x.png)   left  -19px bottom  -7px / 51.2px 51.2px no-repeat,
    url(/assets/ui/ui-frame-metal-cornerbottomright-2x.png)  right  -9px bottom  -7px / 51.2px 51.2px no-repeat,
    url("/assets/ui/!ui-frame-metal-edgeleft-2x.png")        left  -19px top 0 / 120px 25.6px repeat-y,
    url("/assets/ui/!ui-frame-metal-edgeright-2x.png")       right  -9px top 0 / 120px 25.6px repeat-y;
  background-clip: border-box, border-box, border-box, border-box, padding-box, padding-box;
  background-origin: border-box;
  border: solid transparent;
  border-width: 30px 0 30px 0;
}
:is(.wgf-shell-page main, main) .wgf-seo-main > .wgf-section::after,
:is(.wgf-shell-page main, main) .wgf-seo-main > .wgf-ig-frame::after {
  content: "";
  position: absolute;
  left: 32px;
  right: 26px;
  bottom: 0;
  height: 51.2px;
  pointer-events: none;
  background: url(/assets/ui/_ui-frame-metal-edgebottom-2x.png) left bottom -7px / 25.6px 51.2px repeat-x;
}
/* A section with no heading still wears the top rail (the client never ships a frame
   without it); its content steps below the band. */
:is(.wgf-shell-page main, main) .wgf-seo-main > .wgf-section:not(:has(> h2, > .section-heading)) {
  padding-top: 40px;
  background:
    url(/assets/ui/_ui-frame-metal-edgetop-2x.png) left top -26px / 51.2px 120px repeat-x,
    linear-gradient(rgba(0, 0, 0, 0.44), rgba(0, 0, 0, 0.44)),
    url(/assets/ui/classhall-stone-tile.png) left top / 256px 256px repeat,
    var(--wgf-plate);
}

/* The heading IS the window title band (UIFrameMetal edge-top slice), clipped between the
   two corner pieces by transparent inline borders, exactly like .wgf-window__title. */
:is(.wgf-shell-page main, main) .wgf-seo-main > .wgf-section > :is(h2, .section-heading) {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  min-height: 42px;
  margin: 0 calc(var(--space-4) * -1) var(--space-3);
  padding: 1px var(--space-2) 8px;
  border: 0 solid transparent;
  border-inline-width: 30px 24px;
  border-radius: 0;
  background: url(/assets/ui/_ui-frame-metal-edgetop-2x.png) left top -26px / 51.2px 120px repeat-x;
  background-clip: padding-box;
  background-origin: padding-box;
  box-shadow: none;
  color: var(--wgf-gold);
  font-family: var(--font-game);
  font-size: var(--text-md);
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: 0.03em;
  line-height: 1.25;
  text-align: center;
  text-shadow: var(--text-ink-outline);
}
/* Content sits above the frame pieces. */
:is(.wgf-shell-page main, main) .wgf-seo-main > .wgf-section > * { position: relative; }

/* Sections nested inside a page window degrade to plain content (the client never stacks
   window chrome), same rule the kit applies inside .wgf-window. */
.wgf-seo-main > .wgf-section .wgf-section {
  margin-top: var(--space-3);
  border: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}

/* ---------------------------------------------------------------------------------------
   2. Inner panels and plain cards = the client INSET frame (InsetFrameTemplate).
   Replaces every flat plate + 1px border these families drew (facts ledger, art-less cards,
   zone landmarks, roster tallies). Hover = the kit's brightness lift, no invented art.
   --------------------------------------------------------------------------------------- */
:is(.wgf-shell-page main, main) .wgf-seo-main :is(.wgf-world-facts, .wgf-zone-poi,
  .wgf-npcs-tally, .wgf-wiki-table, .wgf-ig-inset) {
  border: 0;
  border-radius: 0;
  background: var(--wgf-inset-art);
  box-shadow: none;
}
:is(.wgf-shell-page main, main) .wgf-seo-main .wgf-ag-card:not([style*="--agc-art"]) {
  border: 0;
  border-radius: 0;
  background: var(--wgf-inset-art);
  box-shadow: none;
}
:is(.wgf-shell-page main, main) .wgf-seo-main .wgf-ag-card:not([style*="--agc-art"]):is(:hover, :focus-visible) {
  filter: brightness(1.3);
}

/* ---------------------------------------------------------------------------------------
   3. NPC identity = the unit PORTRAIT frame (PortraitFrameTemplate, the Merchant frame a
   vendor opens in game): metal window, the round portrait corner holding the icon.
   --------------------------------------------------------------------------------------- */
:is(.wgf-shell-page main, main) .wgf-seo-hero:has(.wgf-npcs-identity) {
  position: relative;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  padding: 44px var(--space-4) var(--space-4) 104px;
  min-height: 132px;
  background:
    url(/assets/ui/_ui-frame-metal-edgetop-2x.png) left top -26px / 51.2px 120px repeat-x,
    linear-gradient(rgba(0, 0, 0, 0.44), rgba(0, 0, 0, 0.44)),
    url(/assets/ui/classhall-stone-tile.png) left top / 256px 256px repeat,
    var(--wgf-plate);
  box-shadow: var(--shadow-2);
}
:is(.wgf-shell-page main, main) .wgf-seo-hero:has(.wgf-npcs-identity)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    url(/assets/ui/ui-frame-portraitmetal-cornertopleft-2x.png) left -15px top -20px / 120px 120px no-repeat,
    url(/assets/ui/ui-frame-metal-cornertopright-2x.png)       right -9px top -26px / 120px 120px no-repeat,
    url(/assets/ui/ui-frame-metal-cornerbottomleft-2x.png)     left -19px bottom -7px / 51.2px 51.2px no-repeat,
    url(/assets/ui/ui-frame-metal-cornerbottomright-2x.png)    right -9px bottom -7px / 51.2px 51.2px no-repeat,
    url(/assets/ui/_ui-frame-metal-edgebottom-2x.png)          left bottom -7px / 25.6px 51.2px repeat-x;
}
/* The icon sits in the portrait well of the corner piece (round crop, as the client
   masks every unit portrait). A creature without a family icon keeps the empty well. */
:is(.wgf-shell-page main, main) .wgf-seo-hero:has(.wgf-npcs-identity) .wgf-npcs-frame {
  position: absolute;
  left: 6px;                                       /* centred in the corner piece's round well */
  top: 29px;
  width: 78px;
  height: 78px;
  z-index: 1;
  border-radius: 50%;
  overflow: hidden;
  border-image: none;
  background-color: var(--wgf-well);
}
:is(.wgf-shell-page main, main) .wgf-seo-hero:has(.wgf-npcs-identity) .wgf-npcs-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
:is(.wgf-shell-page main, main) .wgf-seo-hero:has(.wgf-npcs-identity) .wgf-npcs-identity {
  position: static;                                /* the portrait anchors to the frame, not the row */
  border: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}
:is(.wgf-shell-page main, main) .wgf-seo-hero:has(.wgf-npcs-identity) .wgf-npcs-identity__text {
  position: relative;
  z-index: 3;
}

/* ---------------------------------------------------------------------------------------
   4. Adventure Guide encounter text = the journal's parchment page. On paper the legibility
   contract inverts (dark ink), so the journal tree's light colours are re-scoped here.
   --------------------------------------------------------------------------------------- */
.wgf-seo-main .wgf-jn {
  padding: var(--space-3) var(--space-4);
  /* one sheet of paper per page (the art is a torn-edge page, not a tile) */
  background: url(/assets/ui/questbg-parchment.png) center / cover no-repeat;
  color: #2b1d0e;
}
.wgf-seo-main .wgf-jn :is(.wgf-jn__h, .wgf-jn-p, .wgf-jn-list) { color: #2b1d0e; text-shadow: none; }
.wgf-seo-main .wgf-jn .wgf-jn__h--stage { color: #5a3a10; }
.wgf-seo-main .wgf-jn .wgf-jn__grp { border-left-color: rgba(90, 58, 16, 0.35); }
/* Spell links keep the client's hyperlink role but in the journal's own dark-ink weight. */
.wgf-seo-main .wgf-jn .wgf-jn-spell { color: #4a2a00; border-bottom-color: rgba(74, 42, 0, 0.45); font-weight: 700; }
.wgf-seo-main .wgf-jn .wgf-jn-spell:hover { color: #7a4a00; }
.wgf-seo-main .wgf-jn a:not(.wgf-jn-spell) { color: #4a2a00; }

/* ---------------------------------------------------------------------------------------
   5. Encounter record prose (npc_wiki "Encounter journal" / "Creature record" windows).
   --------------------------------------------------------------------------------------- */
.wgf-ig-prose p { margin: 0 0 var(--space-2); color: var(--wgf-text); line-height: 1.65; }
.wgf-ig-prose p:last-child { margin-bottom: 0; }
.wgf-ig-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); margin: 0; padding: var(--space-2) var(--space-3); background: var(--wgf-inset-art); }
.wgf-ig-dl dt { color: var(--wgf-gold-muted); font-family: var(--font-game); font-variant: small-caps; letter-spacing: 0.03em; }
.wgf-ig-dl dd { margin: 0; color: var(--wgf-text); }

@media (max-width: 560px) {
  :is(.wgf-shell-page main, main) .wgf-seo-main > .wgf-section { padding: 0 var(--space-3) var(--space-5); }
  :is(.wgf-shell-page main, main) .wgf-seo-main > .wgf-section > :is(h2, .section-heading) {
    margin-inline: calc(var(--space-3) * -1);
  }
  :is(.wgf-shell-page main, main) .wgf-seo-hero:has(.wgf-npcs-identity) { padding-left: 92px; }
  .wgf-ig-dl { grid-template-columns: 1fr; }
}