/* WoW Forever new-system pages: /wow-forever/legacy-points/ and /wow-forever/new-zones/.
   Tokens only (static/css/_tokens.css); no green chrome (docs/ui-ux/17-blizzard-palette.md). */
.fnp h3 { color: var(--wgf-gold, #dfc18b); font-family: var(--font-game, Georgia, serif); font-size: var(--text-lg, 18px); margin: var(--space-5, 20px) 0 var(--space-2, 8px); }
.fnp-count { color: var(--wgf-muted, #aaa69e); font-family: var(--font-ui, sans-serif); font-size: var(--text-sm, 13px); font-weight: 400; margin-left: var(--space-2, 8px); }
.fnp-jump { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px) var(--space-4, 16px); list-style: none; margin: var(--space-3, 12px) 0 0; padding: 0; }
.fnp-jump a, .fnp-travel { color: var(--wgf-gold-link, #dbb97d); text-underline-offset: 3px; }

/* A perk tree: the client's own 4 x 4 grid (rows and columns from TraitNode PosX/PosY). */
.fnp-tree { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3, 12px); list-style: none; margin: 0; padding: 0; }
.fnp-perk { display: flex; gap: var(--space-3, 12px); align-items: flex-start; padding: var(--space-3, 12px); border: 1px solid var(--wgf-border, #3a342a); border-radius: var(--radius-card, 8px); background: var(--wgf-panel-1, #1b1a18); }
.fnp-perk img { flex: 0 0 36px; border: 1px solid var(--wgf-border-strong, #574b37); border-radius: 4px; }
.fnp-perk h4 { color: var(--wgf-text, #ebe7df); font-size: var(--text-md, 15px); margin: 0 0 4px; }
.fnp-perk h4 a { color: inherit; }
.fnp-perk__ranks { color: var(--wgf-gold-muted, #b39a6a); font-size: var(--text-xs, 11px); font-weight: 400; white-space: nowrap; }
.fnp-perk__text { color: var(--wgf-muted, #c3bcad); font-size: var(--text-sm, 13px); line-height: 1.5; margin: 0; }
.fnp-r0 { grid-row: 1; } .fnp-r1 { grid-row: 2; } .fnp-r2 { grid-row: 3; } .fnp-r3 { grid-row: 4; }
.fnp-c0 { grid-column: 1; } .fnp-c1 { grid-column: 2; } .fnp-c2 { grid-column: 3; } .fnp-c3 { grid-column: 4; }

/* Tables (achievements, maps, renames): scroll inside their own box on a phone. */
.fnp-table-wrap { overflow-x: auto; margin: 0 0 var(--space-3, 12px); }
.fnp-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm, 13px); }
.fnp-table th, .fnp-table td { padding: var(--space-2, 8px); border-bottom: 1px solid var(--wgf-border, #3a342a); text-align: left; vertical-align: top; }
.fnp-table th { color: var(--wgf-gold-muted, #b39a6a); font-weight: 600; }
.fnp-table td { color: var(--wgf-text, #ebe7df); }
.fnp-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.fnp-zone { padding: var(--space-2, 8px) 0; border-bottom: 1px solid var(--wgf-border, #3a342a); }
.fnp-zone__meta { color: var(--wgf-muted, #aaa69e); font-size: var(--text-sm, 13px); margin: 0 0 var(--space-2, 8px); }
.fnp-names { columns: 3 12rem; column-gap: var(--space-5, 20px); margin: 0 0 var(--space-3, 12px); padding-left: var(--space-5, 20px); color: var(--wgf-text, #ebe7df); font-size: var(--text-sm, 13px); line-height: 1.6; }

@media (max-width: 760px) {
  /* The grid positions stop mattering on a phone: one perk per line, client order kept. */
  .fnp-tree { grid-template-columns: minmax(0, 1fr); }
  .fnp-perk { grid-row: auto; grid-column: auto; }
}