/* wgf-mount-journal.css - the mount detail page's Mount Journal window (mount_journal_render.py).
 *
 * A 1:1 replica of Collections -> Mounts (Blizzard_MountCollection.xml, mainline). The sheet
 * DRAWS NOTHING: every surface is a real client texture from assets/ui/ (extraction lane:
 * tools/datamine/extract_mount_journal_ui.py). No gradients, no glows, no invented plates, no
 * green. Text on the scene wears the site's ink outline (the client font's own outline).
 *
 * Geometry of the PortraitFrameTemplate NineSlice (2x art shown at 1x = half size):
 *   corners tl/tr 75x75, bl/br 32x32, top edge tile 32x75, bottom 16x32, left/right 75x16.
 *   The metal rails sit 12px in from the art's outer edge on the left, 16px down from the top
 *   (the 26px band there IS the title bar), flush on the right and bottom. Offsets below
 *   place the rails exactly on the window's outer edge.
 */

.mj {
  position: relative;
  max-width: 980px;
  margin: 18px 0 44px;           /* left edge lines up with the content column below */
  padding: 0 0 0 12px;           /* room for the portrait ring's overhang */
}

/* -- the window ------------------------------------------------------------------------ */
.mj-window {
  position: relative;
  padding: 56px 10px 12px;
  background: url("/assets/ui/classhall-stone-tile.png") left top / 256px 256px repeat #0d0f14;
  color: var(--wgf-text);
}
.mj-chrome { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.mj-chrome > span { position: absolute; }
.mj-chrome__tl { left: -12px; top: -16px; width: 75px; height: 75px; z-index: 2;
  background: url("/assets/ui/ui-frame-portraitmetal-cornertopleft-2x.png") 0 0 / 75px 75px no-repeat; }
.mj-chrome__tr { right: 0; top: -16px; width: 75px; height: 75px; z-index: 2;
  background: url("/assets/ui/ui-frame-metal-cornertopright-2x.png") 0 0 / 75px 75px no-repeat; }
.mj-chrome__bl { left: -12px; bottom: 0; width: 32px; height: 32px; z-index: 2;
  background: url("/assets/ui/ui-frame-metal-cornerbottomleft-2x.png") 0 0 / 32px 32px no-repeat; }
.mj-chrome__br { right: 0; bottom: 0; width: 32px; height: 32px; z-index: 2;
  background: url("/assets/ui/ui-frame-metal-cornerbottomright-2x.png") 0 0 / 32px 32px no-repeat; }
.mj-chrome__t { left: 63px; right: 75px; top: -16px; height: 75px;
  background: url("/assets/ui/_ui-frame-metal-edgetop-2x.png") 0 0 / 32px 75px repeat-x; }
.mj-chrome__b { left: 20px; right: 32px; bottom: 0; height: 32px;
  background: url("/assets/ui/_ui-frame-metal-edgebottom-2x.png") 0 0 / 16px 32px repeat-x; }
.mj-chrome__l { left: -12px; top: 59px; bottom: 32px; width: 75px;
  background: url("/assets/ui/!ui-frame-metal-edgeleft-2x.png") 0 0 / 75px 16px repeat-y; }
.mj-chrome__r { right: 0; top: 59px; bottom: 32px; width: 75px;
  background: url("/assets/ui/!ui-frame-metal-edgeright-2x.png") 0 0 / 75px 16px repeat-y; }

/* the portrait: the client's MountJournalPortrait icon, masked round under the ring */
.mj-portrait {
  position: absolute;
  left: -1px;                    /* ring interior: 52px circle centred at (27,23) */
  top: -5px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  z-index: 3;
}

.mj-titlebar {
  position: absolute;
  left: 60px;
  right: 30px;
  top: 0;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}
.mj-titlebar__text {
  font-family: var(--font-game);
  font-size: 13px;
  color: var(--wgf-gold-primary);
  text-shadow: var(--text-ink-outline);
}

/* -- the body grid: LeftInset list | RightInset display ------------------------------ */
.mj-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 262px minmax(0, 1fr);
  grid-template-areas: "list disp" "list act";
  gap: 6px 6px;
}
.mj-display { grid-area: disp; position: relative; }
.mj-list    { grid-area: list; }
.mj-actions { grid-area: act; display: flex; justify-content: center; padding: 2px 0 0; }

/* InsetFrameTemplate: the marble well inside the UI-Frame-Inner border */
.mj-inset {
  box-sizing: border-box;
  padding: 3px;
  background:
    url("/assets/ui/UI-Frame-InnerTopLeft.png") left top / 6px 6px no-repeat,
    url("/assets/ui/UI-Frame-InnerTopRight.png") right top / 6px 6px no-repeat,
    url("/assets/ui/UI-Frame-InnerBotLeftCorner.png") left bottom / 6px 6px no-repeat,
    url("/assets/ui/UI-Frame-InnerBotRight.png") right bottom / 6px 6px no-repeat,
    url("/assets/ui/_UI-Frame-InnerTopTile.png") left top / 256px 3px repeat-x,
    url("/assets/ui/_UI-Frame-InnerBotTile.png") left bottom / 256px 3px repeat-x,
    url("/assets/ui/!UI-Frame-InnerLeftTile.png") left top / 3px 256px repeat-y,
    url("/assets/ui/!UI-Frame-InnerRightTile.png") right top / 3px 256px repeat-y,
    url("/assets/ui/blizzard/background-marble.png") left top / 256px 256px repeat #08090c;
}

/* -- LeftInset: MountListButtonTemplate rows ------------------------------------------ */
.mj-list { display: flex; flex-direction: column; padding: 8px 8px 8px 6px; }
.mj-list__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 4px 8px 4px;
  font-family: var(--font-game);
}
.mj-list__title { font-size: 13px; color: var(--wgf-gold-primary); text-shadow: var(--text-ink-outline); }
.mj-list__count { font-size: 12px; color: var(--wgf-text); }
.mj-list__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mj-btn {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 46px;
  padding: 0 8px 0 54px;
  background: url("/assets/ui/petlist-buttonbackground.png") 44px 0 / calc(100% - 44px) 46px no-repeat;
  color: var(--wgf-gold-primary);
  text-decoration: none;
}
a.mj-btn:hover {
  background:
    url("/assets/ui/petlist-buttonhighlight.png") 44px 0 / calc(100% - 44px) 46px no-repeat,
    url("/assets/ui/petlist-buttonbackground.png") 44px 0 / calc(100% - 44px) 46px no-repeat;
}
a.mj-btn:focus-visible { outline: 2px solid var(--wgf-focus); outline-offset: 1px; }
.mj-btn.is-selected {
  background:
    url("/assets/ui/petlist-buttonselect.png") 44px 0 / calc(100% - 44px) 46px no-repeat,
    url("/assets/ui/petlist-buttonbackground.png") 44px 0 / calc(100% - 44px) 46px no-repeat;
  color: var(--wgf-text);
}
.mj-btn__icon { position: absolute; left: 2px; top: 4px; width: 38px; height: 38px; display: block; }
.mj-btn__icon--empty { background: url("/assets/ui/blizzard/emptyslot.png") center / 100% 100% no-repeat; }
.mj-btn__name {
  font-family: var(--font-game);
  font-size: 13px;
  line-height: 1.2;
  text-shadow: var(--text-ink-outline);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.mj-list__all {
  margin: auto 4px 0;
  padding-top: 10px;
  font-family: var(--font-game);
  font-size: 12px;
  color: var(--wgf-gold-bright);
}

/* -- RightInset: MountDisplay ---------------------------------------------------------- */
.mj-scene {
  position: relative;
  min-height: 460px;
  background: url("/assets/ui/mountjournal/mountjournal-bg.jpg") center / 100% 100% no-repeat #1a0c06;
}
.mj-scene--static { display: flex; align-items: center; justify-content: center; }
.mj-scene__medal.wgf-tex-icon-frame { width: 92px; height: 92px; padding: 10px; }

/* InfoButton: icon + Name (GameFontHighlightLarge) + Source + Lore, over the scene */
.mj-info {
  position: absolute;
  left: 3px;
  top: 3px;
  z-index: 6;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: min(62%, 420px);
  padding: 12px 14px;
  pointer-events: none;
}
.mj-info__ring { flex: 0 0 auto; }
.mj-info__text { min-width: 0; }
.mj .mj-info__name {
  margin: 4px 0 4px;
  font-family: var(--font-game);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--wgf-text);
  text-shadow: var(--text-ink-outline);
}
.mj-info__source {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-family: var(--font-game);
  font-size: 13px;
  color: var(--wgf-text);
  text-shadow: var(--text-ink-outline);
}
.mj .mj-info__lore {
  margin: 0;
  font-family: var(--font-game);
  font-size: 13px;
  line-height: 1.35;
  color: var(--wgf-gold-primary);
  text-shadow: var(--text-ink-outline);
}

/* the embedded 3D section: the stage becomes the ModelScene, the backdrop shows through the
   transparent canvas exactly like the client's */
/* (doubled class: must out-rank the shell theme frame, `.wgf-shell-page main :is(.wgf-section, .wgf-info .wgf-window__body ...)` = 0,3,1) */
.mj .mj-scene.mj-scene--model > .wgf-section {
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
.mj-scene.mj-scene--model { min-height: 0; background: none; }
.mj .mj-scene--model .section-heading {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}
.mj-scene--model .wgf-model3d-box {
  position: relative;
  height: 460px;
  border: 0;
  border-radius: 0;
  background: url("/assets/ui/mountjournal/mountjournal-bg.jpg") center / 100% 100% no-repeat #1a0c06;
  overflow: hidden;
}
.mj-scene--model #wgf-model3d-stage { position: absolute; inset: 0; width: auto; height: auto; }
.mj-scene--model #wgf-model3d-stage.wgf-m3d-bg-clear { background: none; }
.mj-scene--model .wgf-model3d-activate {
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
  z-index: 7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: auto;
  min-width: 200px;
  max-width: 90%;
  height: var(--wgf-btn-h);
  padding: 0 var(--wgf-btn-cap);
  background:
    url("/assets/ui/128-redbutton-left-cap.png") left center / auto 100% no-repeat border-box,
    url("/assets/ui/128-redbutton-right-cap.png") right center / auto 100% no-repeat border-box,
    url("/assets/ui/_128-redbutton-center.png") left center / auto 100% repeat-x content-box;
  color: var(--wgf-gold-bright);
  font-family: var(--font-game);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: var(--text-ink-outline);
}
.mj-scene--model .wgf-model3d-activate:hover { filter: brightness(1.12); color: var(--wgf-gold-bright); }
.mj-scene--model .wgf-model3d-variants {
  position: absolute;
  left: 10px;
  bottom: 12px;
  z-index: 12;
  padding: 0;
}
.mj-scene--model #wgf-model3d-status {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 50px;
  z-index: 11;
  padding: 0 12px;
  border: 0;
  text-align: center;
  font-size: .78rem;
  color: var(--wgf-text);
  text-shadow: var(--text-ink-outline);
  pointer-events: none;
}
.mj-scene--model .wgf-model3d-note { margin: 6px 8px 4px; }

/* ModelSceneControlFrame: 32px square gray buttons, -6px horizontal padding, 16px glyphs */
.mj-controls {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 12;
  display: flex;
}
.mj-controls[hidden] { display: none; }
.mj-ctl {
  position: relative;
  width: 32px;
  height: 32px;
  margin: 0 0 0 -6px;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: url("/assets/ui/common-button-square-gray-up.png") center / 100% 100% no-repeat;
  touch-action: none;
}
.mj-ctl:first-child { margin-left: 0; }
.mj-ctl:active { background-image: url("/assets/ui/common-button-square-gray-down.png"); }
.mj-ctl:hover .mj-ctl__icon { filter: brightness(1.3); }
.mj-ctl:focus-visible { outline: 2px solid var(--wgf-focus); outline-offset: -2px; }
.mj-ctl__icon {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 16px;
  height: 16px;
  background: center / 100% 100% no-repeat;
}
.mj-ctl:active .mj-ctl__icon { left: 9px; top: 9px; }
.mj-ctl__icon--zoomin   { background-image: url("/assets/ui/common-icon-zoomin.png"); }
.mj-ctl__icon--zoomout  { background-image: url("/assets/ui/common-icon-zoomout.png"); }
.mj-ctl__icon--rotleft  { background-image: url("/assets/ui/common-icon-rotateleft.png"); }
.mj-ctl__icon--rotright { background-image: url("/assets/ui/common-icon-rotateright.png"); }
.mj-ctl__icon--reset    { background-image: url("/assets/ui/common-icon-undo.png"); }

/* the viewer's own bar (fullscreen, background, spin, reset, share, screenshot) wears the same
   client square button as the control frame */
.mj-scene--model .wgf-model3d-btn {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 0;
  background: url("/assets/ui/common-button-square-gray-up.png") center / 100% 100% no-repeat;
  color: var(--wgf-gold-primary);
}
.mj-scene--model .wgf-model3d-btn:active { background-image: url("/assets/ui/common-button-square-gray-down.png"); }
.mj-scene--model .wgf-model3d-btn:hover { color: var(--wgf-gold-bright); filter: brightness(1.2); }
.mj-scene--model .wgf-model3d-btn[aria-pressed="true"] { color: var(--wgf-text); }

/* MountButton (MagicButtonTemplate) - the red "Mount" button under the display */
.mj-mount-btn { min-width: 140px; }

/* -- CollectionsJournal tabs, hanging under the window ------------------------------- */
.mj-tabs { display: flex; gap: 0; padding: 0 0 0 22px; margin-top: -2px; position: relative; z-index: 0; }
.mj-tab {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 30px;
  padding: 0 16px 4px;
  margin-right: -4px;
  background:
    url("/assets/ui/uiframe-tab-left.png") left top / auto 100% no-repeat,
    url("/assets/ui/uiframe-tab-right.png") right top / auto 100% no-repeat,
    url("/assets/ui/_uiframe-tab-center.png") left top / auto 100% repeat-x;
  background-clip: border-box, border-box, content-box;
  font-family: var(--font-game);
  font-size: 12px;
  color: var(--wgf-gold-primary);
  text-decoration: none;
  text-shadow: var(--text-ink-outline);
}
.mj-tab:hover { filter: brightness(1.2); }
.mj-tab.is-active { color: var(--wgf-text); filter: brightness(1.25); }

/* -- the Details facts under the window: the client's label / value tooltip lines -------- */
.wgf-facts-grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 18px;
  margin: 10px 0 4px;
}
.wgf-facts-grid .wgf-fact { display: contents; }
.wgf-facts-grid .wgf-fact__k { font-family: var(--font-game); font-size: 13px; color: var(--wgf-gold-primary); }
.wgf-facts-grid .wgf-fact__v { color: var(--wgf-text); }

/* -- mobile: one column, the scene first, the list collapses into a swipe strip ------- */
@media (max-width: 760px) {
  .mj { padding-left: 8px; margin-top: 22px; }
  .mj-window { padding: 52px 8px 12px; }
  .mj-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "disp" "act" "list"; }
  .mj-info { position: static; max-width: none; padding: 10px 10px 8px; pointer-events: auto; }
  .mj .mj-info__name { font-size: 19px; }
  .mj-scene--model .wgf-model3d-box { height: 320px; }
  .mj-scene.mj-scene--static { min-height: 0; height: 220px; }
  .mj-list { padding: 8px 6px; }
  .mj-list__rows { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .mj-list__rows > li { flex: 0 0 232px; scroll-snap-align: start; }
  .mj-list__all { margin-top: 8px; padding-top: 0; }
  .mj-titlebar { left: 54px; right: 24px; }
  .mj-tab { padding: 0 12px 4px; font-size: 11px; }
  /* narrow scene: the Classic|HD chips keep the bottom-left, the control frame moves to the
     bottom-right so the two never overlap (the viewer's own bar owns the top edge) */
  .mj-scene--model .wgf-model3d-variants { left: 8px; bottom: 10px; }
  .mj-controls { left: auto; right: 8px; transform: none; }
}