/* =============================================================================
   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 .wgf-input { margin-bottom: var(--space-2); }
.wgf-house-main { min-width: 0; }

/* SEO masthead folded INTO the window plate (ig-58 has no web hero): a full-width
   strip above the rail + grid carrying the eyebrow / h1 / sub (their shared
   wgf-seo-* type voices) and the red-button planner CTA with a muted Friz caption. */
.wgf-house-mast {
  grid-column: 1 / -1;
  min-width: 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--wgf-border);
}
.wgf-house-cta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-3) 0 0;
}
.wgf-house-cta-sub {
  color: var(--wgf-gold-muted);
  font-family: var(--font-game);
  font-size: var(--text-sm);
  text-shadow: var(--text-ink-outline);
}

/* grid-tile icon ring: the kit .wgf-qborder must not shrink in the card's flex row */
.wgf-house-tile__frame { flex: 0 0 auto; }

/* 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);
}
/* hero icon rides the kit quality ring (.wgf-qborder) scaled to hero size; the
   inner icon keeps the ring's inset proportion (64 x 32/44 = 46px round). */
.wgf-decor-hero__frame {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
}
.wgf-decor-hero__frame > img { width: 46px; height: 46px; }
.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; }

/* -----------------------------------------------------------------------------
   Frame-token guard: comments_embed injects assets/ah/wgf-comments.css into the
   BODY of every page carrying a community section, and that sheet's :root
   "fallback" block repaints --wgf-border-strong to a green (#6b8c5f) AFTER
   static/css/_tokens.css set the canonical gold - turning the detail masthead
   frame bright green. Re-pin the canonical composition ON the hero element
   itself: an own declaration always beats an inherited :root value, so this
   holds regardless of stylesheet load order. Root cause lives in
   wgf-comments.css (fallback tokens declared unconditionally on :root).
   --------------------------------------------------------------------------- */
.wgf-seo-hero { --wgf-border-strong: rgba(var(--wgf-gold-rgb), 0.42); }