/* =============================================================================
   wgf-small-mines.css - page-scoped kit polish for the small-mines encyclopedia
   family: gems, enchants, titles, races, heirlooms, events, trading-post, spells,
   the spells index, pet abilities and housing decor.

   Owner law: docs/ui-ux/13-ingame-reference.md sec 0.4 (the container standard -
   every container wears the near-black .wgf-window plate, no rounded pills) and
   sec 0.9 (THE chrome kit). This file ONLY adapts this family's existing markup
   onto the shared chrome kit (assets/wgf-chrome.css); it never restyles a shared
   component. Load AFTER wgf-chrome.css.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   The window is the single container. A .wgf-section dropped inside a window body
   sheds its own rounded-card chrome (border / radius / drop-shadow / panel fill)
   so the near-black window plate is the ONE surface underneath - no card-on-card,
   no pill (the look the owner condemned, ig-38/39). The vertical rhythm is kept.
   --------------------------------------------------------------------------- */
.wgf-window__body .wgf-section {
  margin: 0 0 var(--space-5);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.wgf-window__body .wgf-section:last-child { margin-bottom: 0; }

/* Section headers keep the gold small-caps display voice on the plate. */
.wgf-window__body .section-heading {
  margin: 0 0 var(--space-3);
  color: var(--wgf-gold);
  font-family: var(--font-game);
  font-variant: small-caps;
  letter-spacing: 0.03em;
}

/* The find / search block reads as an inset control strip on the plate. */
.wgf-window__body .rd-find-section { margin-bottom: var(--space-4); }
.wgf-window__body .rd-find__label {
  color: var(--wgf-gold-muted);
  font-family: var(--font-game);
  font-variant: small-caps;
  letter-spacing: 0.03em;
}

/* -----------------------------------------------------------------------------
   Housing Dashboard (ig-58): a left nav-rail of decor categories + the decor grid,
   both on the window plate. The rail wears the AH nav-button idiom (.wgf-navbtn,
   complete plates + hover glow + gold selected state); the count rides the right
   edge. Decor tiles wear the first-party tooltip surface (.wgf-tooltip-surface).
   --------------------------------------------------------------------------- */
.wgf-house-dash__body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 760px) {
  .wgf-house-dash__body { grid-template-columns: 1fr; }
}
.wgf-house-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.wgf-house-rail .rd-find { margin-bottom: var(--space-2); }
.wgf-house-main { min-width: 0; }

/* the category button is a nav-rail plate with a right-aligned count */
.wgf-house-cat { justify-content: space-between; gap: var(--space-2); }
.wgf-house-cat__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wgf-house-cat__count {
  flex: 0 0 auto;
  color: var(--wgf-gold-muted);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
}
.wgf-house-cat.is-selected .wgf-house-cat__count { color: var(--wgf-gold-bright); }

/* decor tiles: the tooltip plate under the existing icon + name card */
.wgf-house-main .wgf-ag-card.wgf-tooltip-surface { padding: var(--space-2) var(--space-3); }

/* -----------------------------------------------------------------------------
   Housing decor DETAIL pane (ig-58 right column): a hero icon + name over the
   Category / Subcategory / Item / Cost lines, each a .wgf-plate-row (kit plate).
   --------------------------------------------------------------------------- */
.wgf-decor-hero {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.wgf-decor-hero__icon {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border: 2px solid var(--wgf-border-strong);
  border-radius: var(--radius-control);
  background: var(--wgf-bg-base) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7);
}
.wgf-decor-hero__meta { min-width: 0; }
.wgf-decor-hero__name {
  display: block;
  font-family: var(--font-game);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--wgf-gold-bright);
  text-shadow: var(--text-ink-outline);
}
.wgf-decor-hero__id {
  display: block;
  color: var(--wgf-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.wgf-decor-lines { display: flex; flex-direction: column; gap: var(--space-1); }
.wgf-decor-line { justify-content: space-between; gap: var(--space-3); }
.wgf-decor-line__k {
  color: var(--wgf-gold-muted);
  font-family: var(--font-game);
  font-variant: small-caps;
  letter-spacing: 0.03em;
}
.wgf-decor-line__v {
  color: var(--wgf-text);
  font-family: var(--font-ui);
  text-align: right;
}
.wgf-decor-line__muted { color: var(--wgf-muted); font-style: italic; }