/* wgf-collection-journal.css - the in-game Mount / Pet Journal grid (.wgf-jrnl).
 *
 * ONE home for the "owned collection as an icon grid" surface. Rendered by wgf-ondemand.js from the
 * on-demand collection API (entries = owned ids resolved to name + first-party icon + entity URL).
 * Before this, a loaded collection rendered as bare text pills (.wgf-od-chip) - the exact "too much
 * plain" defect the owner ruled on 2026-07-30. The chip styles stay in wgf-pvp.css as the no-catalog
 * fallback; this file owns the journal.
 *
 * Frame language is deliberately the SAME as the paperdoll's .pd__iconbox (wgf-gear-grid.css):
 * squared stone tile, hard black inner edge, icon inset - so gear and collections read as one client.
 */

.wgf-jrnl {
  margin-top: var(--space-3);
  border: 1px solid var(--wgf-border-neutral);
  border-radius: var(--radius-hero);
  background: var(--wgf-well);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), inset 0 0 22px rgba(0, 0, 0, .55);
}

/* -- toolbar: the journal's search box + live "n of N" readout ------------------------- */
.wgf-jrnl__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--wgf-border-neutral-soft);
  background: linear-gradient(180deg, var(--wgf-panel-2), var(--wgf-panel-1));
  border-radius: var(--radius-hero) var(--radius-hero) 0 0;
}

.wgf-jrnl__search {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--wgf-input-h);
  padding: 0 .6rem;
  color: var(--wgf-text);
  background: var(--wgf-well);
  border: 1px solid var(--wgf-border-neutral);
  border-radius: var(--radius-control);
  font: inherit;
  font-size: .88rem;
}

.wgf-jrnl__search::placeholder { color: var(--wgf-muted); }
.wgf-jrnl__search:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.wgf-jrnl__shown {
  flex: 0 0 auto;
  color: var(--wgf-muted);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}

/* -- the grid ------------------------------------------------------------------------- */
/* Auto-fill keeps the tile size fixed and the column count fluid, the way the in-game journal
   reflows. Capped height with its own scroll: a 300-mount collection is a pane you scroll inside,
   not a wall that pushes the rest of the page off-screen. */
.wgf-jrnl__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-2);
  padding: var(--space-3);
  max-height: 30rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* -- one collected entry --------------------------------------------------------------- */
.wgf-jrnl__tile {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  padding: .35rem .45rem;
  color: var(--wgf-text);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
}

a.wgf-jrnl__tile:hover {
  background: var(--wgf-panel-2);
  border-color: var(--wgf-border-neutral);
}

a.wgf-jrnl__tile:hover .wgf-jrnl__name { color: var(--wgf-gold-bright, var(--wgf-gold)); }
a.wgf-jrnl__tile:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Squared stone icon frame - twin of .pd__iconbox so gear and collections match. */
.wgf-jrnl__frame {
  flex: 0 0 auto;
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: var(--wgf-panel-3);
  border: 1px solid rgba(0, 0, 0, .5);
}

.wgf-jrnl__icon {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
}

/* A collected entry the datamine build has no icon for still occupies a frame (honest: it IS
   owned) rather than collapsing the tile and mis-aligning the grid. */
.wgf-jrnl__icon--blank {
  background: repeating-linear-gradient(45deg,
    var(--wgf-panel-2) 0 6px, var(--wgf-panel-3) 6px 12px);
}

.wgf-jrnl__txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.wgf-jrnl__name {
  min-width: 0;
  font-size: .82rem;
  line-height: 1.25;
  color: var(--wgf-text);
  overflow-wrap: anywhere;
}

/* Second line on tiles that carry a fact (a reputation's standing, a title's source). */
.wgf-jrnl__meta {
  font-size: .72rem;
  line-height: 1.2;
  color: var(--wgf-muted);
  font-variant-numeric: tabular-nums;
}

/* --- text journals (titles): no art exists for these, so drop the frame rather than fill the
   grid with hundreds of identical blank plates, and let each tile take the width a full title
   needs ("Bloodsail Admiral", "the Lightbringer"). --- */
.wgf-jrnl--text .wgf-jrnl__frame { display: none; }
.wgf-jrnl--text .wgf-jrnl__grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.wgf-jrnl--text .wgf-jrnl__tile {
  padding: .4rem .6rem;
  border-color: var(--wgf-border-neutral-soft);
  background: var(--wgf-panel-1);
}
.wgf-jrnl--text .wgf-jrnl__name { font-size: .85rem; }

/* The equipped title / active entry reads as selected, the way the client marks it. */
.wgf-jrnl__tile--active {
  border-color: var(--wgf-gold) !important;
  background: rgba(var(--wgf-gold-rgb), .1) !important;
}
.wgf-jrnl__tile--active .wgf-jrnl__name { color: var(--wgf-gold-bright, var(--wgf-gold)); font-weight: 700; }

/* --- reputation journal: standing drives the label colour, never a fill bar (owner law
   2026-07-03 — a 7.6% row rendering as a full bar is nonsense). --- */
.wgf-jrnl--reps .wgf-jrnl__grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.wgf-jrnl--reps .wgf-jrnl__frame { display: none; }
.wgf-jrnl--reps .wgf-jrnl__tile {
  padding: .4rem .6rem;
  border-color: var(--wgf-border-neutral-soft);
  background: var(--wgf-panel-1);
}
.wgf-jrnl__standing { font-weight: 700; }
.wgf-jrnl__standing--exalted { color: #00ccff; }
.wgf-jrnl__standing--revered { color: #1eff00; }
.wgf-jrnl__standing--honored { color: #6fd66f; }
.wgf-jrnl__standing--friendly { color: #b7d99a; }
.wgf-jrnl__standing--neutral { color: #d6c98a; }
.wgf-jrnl__standing--unfriendly,
.wgf-jrnl__standing--hostile,
.wgf-jrnl__standing--hated { color: #e5564b; }

.wgf-jrnl__none {
  margin: 0;
  padding: 0 var(--space-3) var(--space-3);
  color: var(--wgf-muted);
  font-size: .85rem;
}

@media (max-width: 640px) {
  .wgf-jrnl__grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    max-height: 24rem;
  }
}

/* The grid is a scroll container, so it must not animate-scroll for reduced-motion users;
   nothing here animates, but keep hover feedback instant rather than transitioned. */
@media (prefers-reduced-motion: reduce) {
  .wgf-jrnl__tile { transition: none; }
}