/* wgf-db-family.css - page-scoped kit re-cut for THE DATABASE HUB (database_app) and THE
   COLLECTIONS FAMILY hubs (mount/toy/battle_pet/item_set/transmog indexes).
   -----------------------------------------------------------------------------------------
   Owner law: docs/ui-ux/13-ingame-reference.md (kit windows, tooltip-surface rows, game
   fonts, NO rounded-card slop) + OWNER_REVIEW_2026-07-03 (database "most comprehensive page",
   icon on every line, no simple-back-button awkwardness).

   Loaded AFTER wgf-chrome.css and wgf-ag-card.css, so its scoped overrides win without
   !important. Tokens only - never a raw value a token already covers. No AI art. This file is
   the ONE home for these two surfaces' page-scoped styling (Rule 11). */

/* -----------------------------------------------------------------------------
   The kit back affordance (owner: "no simple back button ... super awkward").
   A red-button return-to-Database link sitting under the breadcrumb on every
   family hub and on the database hub's own children.
   --------------------------------------------------------------------------- */
.wgf-db-back { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; }

/* =============================================================================
   THE DATABASE HUB - one kit window per domain group.
   Items & Economy spans the full width at the top (owner: "top 60% of the page");
   the remaining groups tile below it.
   ============================================================================= */
.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-db-window--economy { grid-column: 1 / -1; }
.wgf-db-window__desc {
  margin: 0 0 var(--space-3);
  color: var(--wgf-muted);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: 1.45;
}

/* a domain link row: real datamined icon + gold game-font name + factual blurb, on the
   first-party tooltip-surface plate (near-black blue-tinted, thin light border). */
.wgf-db-rows { display: flex; flex-direction: column; gap: var(--space-2); }
.wgf-db-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid #7a7a96;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(12, 12, 30, 0.97), rgba(5, 5, 16, 0.97));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  text-decoration: none;
  color: var(--wgf-text);
  transition: border-color var(--motion-fast) var(--ease-standard),
              background var(--motion-fast) var(--ease-standard);
}
.wgf-db-row:hover, .wgf-db-row:focus-visible {
  border-color: #9a9ab5;
  background: linear-gradient(180deg, rgba(22, 22, 44, 0.97), rgba(8, 8, 22, 0.97));
  outline: none;
}
.wgf-db-row__icon {
  width: 36px; height: 36px; flex: 0 0 auto;
  border: 1px solid rgba(var(--wgf-gold-rgb), 0.45);
  border-radius: 3px; background: #000; object-fit: cover;
}
.wgf-db-row__text { min-width: 0; }
.wgf-db-row__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-md);
  letter-spacing: 0.04em;
  color: var(--wgf-gold-bright);
  text-shadow: var(--text-ink-outline);
  line-height: 1.2;
}
.wgf-db-row__blurb {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--wgf-muted);
  line-height: 1.35;
}

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

/* =============================================================================
   THE COLLECTION HUBS - the SSR art-card grid re-cut into tooltip-surface list
   rows (owner: rounded cards -> kit rows with real icons). Scoped under
   .wgf-db-hub so no other page's .wgf-ag-card is touched; the shared card's
   content-visibility (render-cost containment) is inherited untouched.
   ============================================================================= */
.wgf-db-hub .wgf-ag-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.wgf-db-hub .wgf-ag-card {
  min-height: 0;
  align-items: center;
  border-color: var(--wgf-metal);
  border-radius: 0;
  background: var(--wgf-panel-1);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45);
  contain-intrinsic-size: auto 56px;
}
.wgf-db-hub .wgf-ag-card:hover,
.wgf-db-hub .wgf-ag-card:focus-visible {
  transform: none;
  border-color: rgba(var(--wgf-gold-rgb), .55);
  background: var(--wgf-panel-2);
}
.wgf-db-hub .wgf-ag-card__name { font-size: var(--text-sm); }