/* wgf-set-journal.css - the two SET families in their in-game window (set_journal.py).
 *
 * Owner rulings 2026-10-10 evening: every page looks like it came straight out of the game,
 * the client's own UI art 1:1, its own layout per family, no blue cards. Model: the
 * Collections Journal > Appearances > Sets tab (WardrobeSetsFrame) and the item tooltip's set
 * block. Linked by /transmog-set/, /transmog-sets/, /item-set/ and /item-sets/ only.
 *
 * Art (assets/ui/, all client extracts):
 *   window frame + title band ........ .wgf-window (wgf-chrome.css, UIFrameMetal)
 *   insets (list, details pane) ...... --wgf-inset-art (UI-Frame-Inner rims + marble)
 *   sets list rows ................... petlist-buttonbackground / -buttonselect / -buttonhighlight
 *   item frames under the model ...... loottab-set-itemborder-<quality>.png
 *   empty icon slot .................. blizzard/emptyslot.png
 *   model backdrop ................... mountjournal/mountjournal-bg.jpg (the Collections
 *                                      Journal's own model backdrop; the Wardrobe's per-class
 *                                      backdrops are not extracted yet)
 *   tooltip set block ................ blizzard/tooltip-nineslice-* (GameTooltip NineSlice)
 *   tabs ............................. .wgf-ftab (uiframe-tab slices)
 *   table rows ....................... auctionhouse-rowstripe-1/2.png
 * Palette: tokens only (gold, parchment text, item quality). No gradients, no glows, no navy.
 */

/* ── the window ─────────────────────────────────────────────────────────────────────── */
.wgf-sj > .wgf-window__body { padding: var(--space-2) var(--space-3) var(--space-3); }
.wgf-sj__subtabs {
  display: flex;
  gap: 2px;
  padding: 0 var(--space-2);
  margin: 0 0 -1px;
}
.wgf-sj__subtabs .wgf-ftab { cursor: default; }
.wgf-sj__body {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
}
.wgf-sj__body--solo { grid-template-columns: minmax(0, 1fr); }

/* The journal's bottom tabs hang off the frame's bottom rail, unflipped. */
.wgf-sj__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0 var(--space-4);
  margin: -6px 0 0;
  position: relative;
  z-index: 1;
}
.wgf-sj__tabs .wgf-ftab::before { transform: none; }
.wgf-sj__tabs a.wgf-ftab { text-decoration: none; }

/* ── the sets list (left inset) ─────────────────────────────────────────────────────── */
.wgf-sj__list {
  background: var(--wgf-inset-art);
  padding: 4px;
  max-height: 560px;
  overflow-y: auto;
}
.wgf-sj__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.wgf-sj__row,
.wgf-sj__rlink {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  box-sizing: border-box;
  padding: 3px 8px 3px 4px;
  color: var(--wgf-text);
  text-decoration: none;
}
.wgf-sj__row { background: url(/assets/ui/petlist-buttonbackground.png) left top / 100% 100% no-repeat; }
.wgf-sj__row > .wgf-sj__rlink { flex: 1 1 auto; min-width: 0; margin: -3px -8px -3px -4px; }
.wgf-sj__rlink:hover,
.wgf-sj__rlink:focus-visible {
  background: url(/assets/ui/petlist-buttonhighlight.png) left top / 100% 100% no-repeat;
  outline: none;
}
.wgf-sj__row.is-selected {
  background:
    url(/assets/ui/petlist-buttonselect.png) left top / 100% 100% no-repeat,
    url(/assets/ui/petlist-buttonbackground.png) left top / 100% 100% no-repeat;
}
.wgf-sj__ricon { flex: 0 0 38px; width: 38px; height: 38px; display: block; }
.wgf-sj__ricon--empty { background: url(/assets/ui/blizzard/emptyslot.png) center / 100% 100% no-repeat; }
.wgf-sj__rtext { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.wgf-sj__rname {
  color: var(--wgf-gold);
  font-family: var(--font-game);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
  text-shadow: var(--text-ink-outline);
}
.wgf-sj__rlabel,
.wgf-sj__rmeta { font-size: 0.75rem; color: var(--wgf-neutral-text); }

/* ── the details pane (right) ───────────────────────────────────────────────────────── */
.wgf-sj__detail {
  background: var(--wgf-inset-art);
  padding: var(--space-3);
  min-width: 0;
  text-align: center;
}
.wgf-sj__name {
  margin: 0;
  color: var(--wgf-gold);
  font-family: var(--font-game);
  font-size: var(--text-lg);
  font-weight: 700;
  text-shadow: var(--text-ink-outline);
}
.wgf-sj__label { margin: 2px 0 0; color: var(--wgf-neutral-text); font-size: var(--text-sm); }
.wgf-sj__summary { margin: var(--space-2) auto 0; max-width: 62ch; color: var(--wgf-text); }
.wgf-sj__summary p { margin: 0; }
.wgf-sj__stage {
  margin: var(--space-3) 0 0;
  padding: var(--space-2);
  background:
    url(/assets/ui/mountjournal/mountjournal-bg.jpg) center / cover no-repeat;
  text-align: left;
}
.wgf-sj__stage .wgf-tmw__frame { margin-top: 0; }

/* item frames under the model: icon inside LootTab-Set-ItemBorder, quality-coloured */
.wgf-sj__items {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: var(--space-3) 0 0;
  padding: 0;
}
.wgf-sj__item {
  position: relative;
  display: block;
  width: 41px;
  height: 41px;
}
.wgf-sj__icon { position: absolute; left: 2px; top: 2px; width: 37px; height: 37px; display: block; }
.wgf-sj__border { position: absolute; inset: 0; width: 41px; height: 41px; pointer-events: none; }
a.wgf-sj__item:hover .wgf-sj__icon,
a.wgf-sj__item:focus-visible .wgf-sj__icon { filter: brightness(1.25); }
a.wgf-sj__item:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* the item tooltip's set block (GameTooltip nine-slice, 7px rim) */
.wgf-sj__tooltip {
  display: inline-block;
  max-width: 420px;
  margin: var(--space-3) auto 0;
  padding: 10px 12px;
  text-align: left;
  border: 7px solid transparent;
  background:
    url(/assets/ui/blizzard/tooltip-nineslice-cornertopleft.png) left top / 7px 7px no-repeat border-box,
    url(/assets/ui/blizzard/tooltip-nineslice-cornertopright.png) right top / 7px 7px no-repeat border-box,
    url(/assets/ui/blizzard/tooltip-nineslice-cornerbottomleft.png) left bottom / 7px 7px no-repeat border-box,
    url(/assets/ui/blizzard/tooltip-nineslice-cornerbottomright.png) right bottom / 7px 7px no-repeat border-box,
    url(/assets/ui/blizzard/tooltip-nineslice-edgetop.png) left top / 16px 7px repeat-x border-box,
    url(/assets/ui/blizzard/tooltip-nineslice-edgebottom.png) left bottom / 16px 7px repeat-x border-box,
    url(/assets/ui/blizzard/tooltip-nineslice-edgeleft.png) left top / 7px 16px repeat-y border-box,
    url(/assets/ui/blizzard/tooltip-nineslice-edgeright.png) right top / 7px 16px repeat-y border-box,
    /* the client tints the grey centre tile near-black; the dark dialog fill is that tint */
    url(/assets/ui/blizzard/dialogbox-background-dark.png) left top / 64px 64px repeat padding-box,
    url(/assets/ui/blizzard/tooltip-nineslice-center.png) left top / 64px 64px repeat padding-box;
  font-size: var(--text-sm);
  line-height: 1.35;
}
.wgf-sj__tiphead { margin: 0 0 4px; color: var(--wgf-gold); }
.wgf-sj__tippieces,
.wgf-sj__tipbonus { list-style: none; margin: 0; padding: 0 0 0 10px; }
.wgf-sj__tippieces li { color: var(--q-poor); }
.wgf-sj__tippieces a { color: inherit; text-decoration: none; }
.wgf-sj__tippieces a:hover { text-decoration: underline; }
.wgf-sj__tipbonus { margin-top: 6px; padding-left: 0; }
.wgf-sj__tipbonus li { color: var(--q-poor); margin: 2px 0; }
.wgf-sj__tipnote { margin: 4px 0 0; color: var(--wgf-neutral-text); }
.wgf-sj__tipspec { color: var(--wgf-gold); font-size: 0.75rem; }

/* quality text on the journal's own names */
.wgf-sj .q-poor { color: var(--q-poor); }
.wgf-sj .q-common { color: var(--q-common); }
.wgf-sj .q-uncommon { color: var(--q-uncommon); }
.wgf-sj .q-rare { color: var(--q-rare); }
.wgf-sj .q-epic { color: var(--q-epic); }
.wgf-sj .q-legendary { color: var(--q-legendary); }
.wgf-sj .q-artifact,
.wgf-sj .q-heirloom { color: var(--q-artifact); }

/* ── the family's blocks inside the window kit (set_wiki.windowize) ──────────────────── */
.wgf-set-win { margin: 0 0 var(--space-4); }
.wgf-set-win > .wgf-window__title { font-size: var(--text-md); }

/* Plain bordered cards the family's renderers still emit become client art in place:
   list rows wear the PetList button, tables the Auction House row stripes, the find bar
   and fact grids sit on the window stone with no CSS rule around them. */
.wgf-sj-page :is(.wgf-tmset-cohort__row, .wgf-tmset-top__row, .wgf-tmset-piece, .wgf-set-card,
                 .wgf-ag-card, .wgf-tmset-chip, .wgf-tmset-cell) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: url(/assets/ui/petlist-buttonbackground.png) left top / 100% 100% no-repeat;
}
.wgf-sj-page :is(.wgf-tmset-cohort__row, .wgf-tmset-top__row, .wgf-ag-card, .wgf-tmset-chip,
                 .wgf-tmset-cell):is(:hover, :focus-visible) {
  background: url(/assets/ui/petlist-buttonhighlight.png) left top / 100% 100% no-repeat;
}
.wgf-sj-page .wgf-tmset-chip[aria-pressed="true"],
.wgf-sj-page .wgf-tmset-chip.is-active {
  background:
    url(/assets/ui/petlist-buttonselect.png) left top / 100% 100% no-repeat,
    url(/assets/ui/petlist-buttonbackground.png) left top / 100% 100% no-repeat;
}
.wgf-sj-page :is(.wgf-seo-table, .wgf-tmset-xt, .wgf-wiki-table) tbody tr {
  background: url(/assets/ui/auctionhouse-rowstripe-1.png) left top / 16px 100% repeat-x;
}
.wgf-sj-page :is(.wgf-seo-table, .wgf-tmset-xt, .wgf-wiki-table) tbody tr:nth-child(even) {
  background: url(/assets/ui/auctionhouse-rowstripe-2.png) left top / 16px 100% repeat-x;
}
.wgf-sj-page :is(.wgf-ifacts__grid, .wgf-set-facts, .wgf-tmset-group, .wgf-tmset-stats,
                 .wgf-tmset-rel, .wgf-set-bonuses) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.wgf-sj-page :is(.wgf-ifacts__grid, .wgf-set-facts) { background: var(--wgf-inset-art); padding: var(--space-2); }
.wgf-sj-page :is(.wgf-ifacts__row, .wgf-set-facts > div) { border: 0; border-radius: 0; box-shadow: none; background: none; }
.wgf-sj-page .rd-find-section { border: 0; border-radius: 0; background: none; box-shadow: none; padding: var(--space-2) 0 0; margin: 0; }

/* ── small screens ──────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .wgf-sj__body { grid-template-columns: minmax(0, 1fr); }
  .wgf-sj__detail { order: -1; }
  .wgf-sj__list { max-height: 260px; }
  .wgf-sj__tabs { padding: 0 var(--space-2); }
}
@media (max-width: 400px) {
  .wgf-sj > .wgf-window__body { padding: var(--space-1) var(--space-2) var(--space-2); }
  .wgf-sj__detail { padding: var(--space-2); }
  .wgf-sj__tooltip { max-width: 100%; }
}