/* wgf-database-journal.css - THE DATABASE HUB journal skin (database_app.py ONLY).
   -----------------------------------------------------------------------------------------
   Owner law: docs/ui-ux/13-ingame-reference.md (ig-17/19 Adventure Guide journal shell,
   ig-38 container standard, sec 9 chrome kit) + OWNER_DOCTRINE_2026-07-04 (1:1 in-game UI,
   real Blizzard textures only, no AI art, no web-style hover underlines).

   The look: the in-game Adventure Guide / Dungeon Journal. Every category group renders as
   a JOURNAL ENTRY - a parchment-dark plate (the real questbg-parchment paper under a heavy
   dark wash, so gold/white text keeps the legibility contract) inside the real
   achievement-wood gilt 9-slice frame. Section switching = the kit tab strip (.wgf-tab from
   wgf-chrome.css) as in-page jump links. Row hover = brighten + gold text lift, the game
   idiom - never an underline.

   Every texture is a real slice already in /assets/ui/ (sliced by tools/slice_ui_atlas.py).
   The 34px frame band matches the EDGE_TRIM math documented on .wgf-parchment-pane in
   wgf-chrome.css - do not change the band without re-reading that note. Scoped entirely
   under .wgf-dbj so no other surface is touched (Rule 11: this file is the ONE home for the
   database hub's journal skin). Loaded AFTER wgf-chrome.css; overrides win by scope, no
   !important. Tokens from static/css/_tokens.css wherever a token covers the value. */

/* =============================================================================
   THE JOURNAL GRID - Items & Economy leads full-width (owner: the main draw),
   the remaining entries tile beneath like the Adventure Guide's entry panes.
   ============================================================================= */
.wgf-dbj .wgf-db-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-4);
  align-items: start;
  margin: var(--space-4) 0;
}
.wgf-dbj .wgf-db-window--economy { grid-column: 1 / -1; }

/* =============================================================================
   .wgf-dbj-entry - one journal entry. The kit .wgf-window's metal-and-stone
   chrome is swapped for the journal material: gilt achievement-wood 9-slice
   (four corners anchored, four pre-trimmed edge rails tiled) framing the real
   quest parchment under a dark wash ("parchment-dark": the Adventure Guide is
   the dark journal family, so ink stays gold/white, not brown-on-tan).
   Background layer order: frame slices paint ABOVE the wash, wash ABOVE paper.
   ============================================================================= */
.wgf-dbj .wgf-dbj-entry {
  border: 0;
  padding: 34px;                                   /* the gilt frame band */
  background:
    url("/assets/ui/achievement-wood-nineslice-cornertopleft.png") top left / 34px auto no-repeat,
    url("/assets/ui/achievement-wood-nineslice-cornertopright.png") top right / 34px auto no-repeat,
    url("/assets/ui/achievement-wood-nineslice-cornerbottomleft.png") bottom left / 34px auto no-repeat,
    url("/assets/ui/achievement-wood-nineslice-cornerbottomright.png") bottom right / 34px auto no-repeat,
    url("/assets/ui/_achievement-wood-nineslice-edgetop.png") top center / auto 34px repeat-x,
    url("/assets/ui/_achievement-wood-nineslice-edgebottom.png") bottom center / auto 34px repeat-x,
    url("/assets/ui/!achievement-wood-nineslice-edgeleft.png") left center / 34px auto repeat-y,
    url("/assets/ui/!achievement-wood-nineslice-edgeright.png") right center / 34px auto repeat-y,
    linear-gradient(rgba(13, 8, 4, 0.82), rgba(9, 6, 3, 0.87)),
    url("/assets/ui/questbg-parchment.png") center top / 512px auto repeat;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

/* Entry header - the journal section title band: gold Friz small-caps (inherited
   from the kit title) on a quiet dark band with a gilt hairline, the Dungeon
   Journal chapter-heading voice. Replaces the kit's carved-stone header. */
.wgf-dbj .wgf-dbj-entry .wgf-window__title {
  min-height: 40px;
  border-bottom: 1px solid rgba(var(--wgf-gold-rgb), 0.32);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.42));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* the hub H1 sits inside the head entry's title bar (kit typography comes free) */
h1.wgf-window__title { margin: 0; font-size: var(--text-lg); }

.wgf-dbj .wgf-db-window__desc {
  margin: 0 0 var(--space-3);
  color: rgba(232, 213, 175, 0.78);                /* aged-ink tan on the dark parchment */
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.wgf-dbj .wgf-seo-lead {
  margin: 0;
  color: rgba(232, 213, 175, 0.85);
  font-size: var(--text-md);
  line-height: 1.5;
}

/* =============================================================================
   ENTRY LINES - each database section is a journal line: dark inset band on the
   parchment (the EJ loot-row idiom), real datamined icon in the real small AH
   icon border, gold game-font name over a factual blurb. Hover reads IN-GAME:
   the whole line brightens and the name lifts to bright gold - no underline,
   no web lift/translate.
   ============================================================================= */
.wgf-dbj .wgf-db-rows { display: flex; flex-direction: column; gap: var(--space-2); }
.wgf-dbj .wgf-db-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  box-sizing: border-box;
  min-height: 56px;                                /* explicit line height: zero CLS */
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgba(0, 0, 0, 0.55);
  border-radius: 0;
  background: rgba(8, 5, 2, 0.52);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  color: var(--wgf-text);
  text-decoration: none;
  transition: filter var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard),
              background var(--motion-fast) var(--ease-standard);
}
.wgf-dbj .wgf-db-row:hover,
.wgf-dbj .wgf-db-row:focus-visible {
  border-color: rgba(var(--wgf-gold-rgb), 0.55);
  background: rgba(26, 17, 7, 0.62);
  filter: brightness(1.1);                         /* the game's mouseover brighten */
  outline: none;
  text-decoration: none;
}
.wgf-dbj .wgf-db-row:hover .wgf-db-row__name,
.wgf-dbj .wgf-db-row:focus-visible .wgf-db-row__name {
  color: var(--wgf-gold-bright);
}

/* the real client icon border (auctionhouse-itemicon-small-border) wraps every
   datamined icon - fixed box, explicit img dims: zero CLS. */
.wgf-dbj-iconframe {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: url("/assets/ui/auctionhouse-itemicon-small-border.png") center / 100% 100% no-repeat;
}
.wgf-dbj .wgf-db-row__icon {
  display: block;
  width: 32px;
  height: 32px;
  background: #000;
  object-fit: cover;
}

.wgf-dbj .wgf-db-row__text { min-width: 0; }
.wgf-dbj .wgf-db-row__name {
  display: block;
  font-family: var(--font-game);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--wgf-gold);
  text-shadow: var(--text-ink-outline);
  transition: color var(--motion-fast) var(--ease-standard);
}
.wgf-dbj .wgf-db-row__blurb {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  line-height: 1.35;
  color: rgba(232, 213, 175, 0.66);
}

/* =============================================================================
   SECTION TABS - the kit tab strip on the head entry's bottom edge (ig-38
   bottom tab row), each tab a .wgf-tab jump link to its journal entry.
   ============================================================================= */
.wgf-dbj .wgf-window__tabs {
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid rgba(var(--wgf-gold-rgb), 0.25);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.28));
}
.wgf-dbj a.wgf-tab { text-decoration: none; }
/* anchored entries land clear of the sticky site header when a tab is used */
.wgf-dbj .wgf-dbj-entry[id] { scroll-margin-top: 72px; }

@media (max-width: 680px) {
  .wgf-dbj .wgf-db-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .wgf-dbj .wgf-db-row,
  .wgf-dbj .wgf-db-row__name { transition: none; }
}