/* wgf-database-hub.css - the /database/ hub's Blizzard-asset surfaces (2026-09-03).
   ONE home for the hub's own surfaces: the credited world-map strip, the group heading
   icon, the row kind badge, the measured count chip beside it, the key that decodes the
   badges, the credited client still, and the sidebar column (build readout + doorway
   rail). The journal ENTRY skin itself stays in wgf-database-journal.css; the shared tile
   markup stays in wgf-collection-journal.css. Nothing here restyles a shared class outside
   the .wgf-dbj scope.

   Palette: tokens only (docs/ui-ux/17-blizzard-palette.md). No green, no gradient, no glow,
   no invented hex. Every colour below is a var() with the token's own value as fallback. */

/* =============================================================================
   THE HEADER STRIP - a real client world-map composite, cropped to a band.
   The image is 1200x800; object-fit keeps the middle of the map and never
   upscales. The fixed band height is what makes the strip CLS-free without
   forcing the whole 800px plate onto the page.
   ============================================================================= */
.wgf-dbj .wgf-dbh-art {
  margin: 0 0 var(--space-3, .75rem);
  border-bottom: 1px solid var(--wgf-metal, #6e5a2a);
  background: var(--wgf-well, #08090c);
}
.wgf-dbj .wgf-dbh-art__link { display: block; text-decoration: none; }
.wgf-dbj .wgf-dbh-art__img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: center 42%;
}
@media (min-width: 980px) {
  .wgf-dbj .wgf-dbh-art__img { height: 190px; }
}
.wgf-dbj .wgf-dbh-art__credit {
  margin: 0;
  padding: .35rem .75rem .45rem;
  font-size: .72rem;
  line-height: 1.35;
  color: var(--wgf-neutral-text, #9b9384);
  border-top: 1px solid var(--wgf-border-neutral-soft, #202229);
}

/* =============================================================================
   GROUP HEADING ICON - the same small AH icon border the rows wear
   (.wgf-dbj-iconframe, wgf-database-journal.css), one step larger so a group
   title reads as a journal entry header.
   ============================================================================= */
/* Same specificity as wgf-database-journal.css's own title rule and loaded after it, so
   the icon lines up without an !important and without touching that file. */
.wgf-dbj .wgf-dbj-entry .wgf-window__title {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.wgf-dbj .wgf-dbh-groupicon { width: 34px; height: 34px; }
.wgf-dbj .wgf-dbh-groupicon img {
  display: block;
  width: 26px;
  height: 26px;
  background: #000;
  object-fit: cover;
}

/* =============================================================================
   KIND BADGE - where a section's numbers come from, stated before the click.
   Live data takes the client's gold; a datamined catalogue takes muted gold; an
   interactive tool takes the neutral label ink. No new colour enters the page.
   ============================================================================= */
.wgf-dbj .wgf-dbh-kind {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
  padding: .12rem .4rem;
  border: 1px solid var(--wgf-border-neutral, #2e313a);
  font-size: .66rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--wgf-gold-muted, #b5a06a);
  background: var(--wgf-well, #08090c);
}
.wgf-dbj .wgf-dbh-kind[data-kind="Live prices"],
.wgf-dbj .wgf-dbh-kind[data-kind="Live rankings"] {
  color: var(--wgf-gold-primary, #ffd100);
  border-color: var(--wgf-border, rgba(255, 209, 0, .20));
}
.wgf-dbj .wgf-dbh-kind[data-kind="Tool"] {
  color: var(--wgf-neutral-text, #9b9384);
}
@media (max-width: 520px) {
  /* On a phone the badge would push the blurb into a two-word column; the row name
     and the blurb are what the reader is there for. */
  .wgf-dbj .wgf-dbh-kind { display: none; }
}

/* =============================================================================
   COUNT CHIP - the measured size of the section, the one number this page owes
   the reader. It takes the same right-hand rail as the badge: TWO margin-left:auto
   siblings in a flex row means the first one absorbs the free space and the second
   sits against it, so a row with a count and a row without both line up on the
   right. The number takes parchment ink and tabular figures so 39 rows of digits
   read as a column; the noun stays muted so the digits win the glance.
   ============================================================================= */
.wgf-dbj .wgf-dbh-count {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
  white-space: nowrap;
  font-size: .74rem;
  line-height: 1.2;
}
.wgf-dbj .wgf-dbh-count__n {
  color: var(--wgf-text, #f4ecd8);
  font-variant-numeric: tabular-nums;
}
.wgf-dbj .wgf-dbh-count__u { color: var(--wgf-neutral-text, #9b9384); }
/* With a count present the badge is no longer the element doing the pushing, so it
   drops its auto margin and just spaces off the number. */
.wgf-dbj .wgf-dbh-count + .wgf-dbh-kind { margin-left: .5rem; }
@media (max-width: 520px) {
  /* The count SURVIVES the phone breakpoint that hides the badge: on a directory of
     39 links, how much is behind the link is worth more than what kind it is. */
  .wgf-dbj .wgf-dbh-count { font-size: .7rem; }
}

/* =============================================================================
   LABEL KEY - the sidebar panel that decodes the row badges. One badge per line
   in the same chip the rows wear, so the key and the thing it explains are
   visibly the same object.
   ============================================================================= */
.wgf-dbj .wgf-dbh-legend {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.wgf-dbj .wgf-dbh-legend__row {
  display: flex;
  flex-direction: column;
  gap: .18rem;
}
.wgf-dbj .wgf-dbh-legend__row .wgf-dbh-kind {
  align-self: flex-start;
  margin-left: 0;
}
.wgf-dbj .wgf-dbh-legend__t {
  font-size: .8rem;
  line-height: 1.45;
  color: var(--wgf-muted, #b3a88f);
}
@media (max-width: 520px) {
  /* The rows hide their badges at this width, so a key to them would be explaining
     something the reader cannot see. The whole panel goes, heading included - a
     dangling "What the labels mean" over nothing is worse than no panel. */
  .wgf-dbh-aside #database-label-key { display: none; }
}

/* =============================================================================
   TILE GRIDS - the head entry's section jump grid and the sidebar doorway rail,
   both card_ui.journal_tile. The head grid tiles to the plate width; the sidebar
   column is 300px, so its rail is a single stack.
   ============================================================================= */
.wgf-dbj .wgf-dbj-head .wgf-jrnl__grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  margin-top: var(--space-3, .75rem);
}
.wgf-dbj .wgf-dbh-panel .wgf-jrnl__grid { grid-template-columns: 1fr; }

/* =============================================================================
   THE SIDEBAR COLUMN - build readout + doorway rail, in the same journal skin.
   ============================================================================= */
.wgf-dbh-aside { display: flex; flex-direction: column; gap: var(--space-4, 1rem); }
.wgf-dbj .wgf-dbh-note {
  margin: 0 0 .6rem;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--wgf-muted, #b3a88f);
}
.wgf-dbj .wgf-dbh-facts {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.wgf-dbj .wgf-dbh-facts th,
.wgf-dbj .wgf-dbh-facts td {
  padding: .3rem .1rem;
  text-align: left;
  border-bottom: 1px solid var(--wgf-border-neutral-soft, #202229);
}
.wgf-dbj .wgf-dbh-facts th {
  font-weight: 400;
  color: var(--wgf-neutral-text, #9b9384);
}
.wgf-dbj .wgf-dbh-facts .wgf-dbh-facts__v {
  text-align: right;
  color: var(--wgf-text, #f4ecd8);
  font-variant-numeric: tabular-nums;
}
.wgf-dbj .wgf-dbh-facts tr:last-child th,
.wgf-dbj .wgf-dbh-facts tr:last-child td { border-bottom: 0; }

/* =============================================================================
   THE CREDITED STILL - one real client loading screen at the head of the
   doorway panel, illustrating the /wallpapers/ door directly under it. The
   source is a 480px thumbnail with its exact height set on the tag, so the
   figure reserves its own box and nothing below it moves when the image
   arrives. Same credit treatment as the header map strip, one step quieter.
   ============================================================================= */
.wgf-dbj .wgf-dbh-still {
  margin: 0 0 var(--space-3, .75rem);
  border: 1px solid var(--wgf-border-neutral, #2e313a);
  background: var(--wgf-well, #08090c);
}
.wgf-dbj .wgf-dbh-still__link { display: block; text-decoration: none; }
.wgf-dbj .wgf-dbh-still__img {
  display: block;
  width: 100%;
  height: auto;
}
.wgf-dbj .wgf-dbh-still__credit {
  margin: 0;
  padding: .35rem .5rem .4rem;
  font-size: .7rem;
  line-height: 1.35;
  color: var(--wgf-neutral-text, #9b9384);
  border-top: 1px solid var(--wgf-border-neutral-soft, #202229);
}