/* wgf-quest-depth.css - the quest depth layer (quest_depth_render.py, 2026-09-13).
 *
 * Layout only. Every colour, face and space is an existing token (static/css/_tokens.css); no
 * new colour, no rounded pill, no green chrome (docs/ui-ux/17-blizzard-palette.md). Headings
 * reuse .wgf-qenr-sub (wgf-quest-enrich.css), fact rows reuse .wgf-world-facts (wgf-world.css)
 * and item rows reuse .wgf-qst-items (wgf-quests.css), so this sheet only spaces what is new.
 */

.wgf-qdep-card {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--wgf-border-neutral-soft);
  background: var(--wgf-panel-1);
}

.wgf-qdep-card .wgf-qenr-sub {
  margin-top: var(--space-1);
}

.wgf-qdep-card .wgf-world-facts {
  padding: 0;
}

.wgf-qdep-card .wgf-qst-items {
  margin: 0 0 var(--space-2);
}

.wgf-qdep-rows,
.wgf-qdep-steps {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  border: 1px solid var(--wgf-border-neutral-soft);
  background: var(--wgf-panel-1);
}

.wgf-qdep-row,
.wgf-qdep-step {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding: 6px var(--space-2);
}

.wgf-qdep-row + .wgf-qdep-row,
.wgf-qdep-step + .wgf-qdep-step {
  border-top: 1px solid var(--wgf-metal-soft);
}

.wgf-qdep-row__what,
.wgf-qdep-step__name {
  flex: 1 1 14rem;
  min-width: 0;
}

.wgf-qdep-row__meta {
  color: var(--wgf-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.wgf-qdep-text {
  flex: 1 1 100%;
  margin: 0;
  font-size: var(--text-sm);
}

.wgf-qdep-also {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
}

.wgf-qdep-flavor {
  margin: var(--space-2) 0 0;
  color: var(--wgf-gold-muted);
  font-style: italic;
  font-size: var(--text-sm);
}

/* Long values (a Use: line, a stat list) wrap under their label instead of squeezing it. */
.wgf-qdep-card .wgf-world-facts__row {
  flex-wrap: wrap;
}

.wgf-qdep-card .wgf-world-facts__value {
  min-width: 0;
  overflow-wrap: anywhere;
}