/* RacialRow (scripts/lib/components/racial-row.mjs): a square racial icon in the pixel frame,
   the name with its Active or Passive tag, the text, then Classic and dated change lines.
   An icon ring in a talent-state color marks a racial that is new or reworked. */

.wfg-racials { display: grid; gap: .7rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.wfg-racial {
  --icon: 36px;
  --st: var(--edge-inner);
  display: grid;
  grid-template-columns: var(--icon) minmax(0, 1fr);
  gap: .7rem;
  align-items: start;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--ink-2);
}
.wfg-racial[data-state="new"] { --st: var(--new); }
.wfg-racial[data-state="reworked"] { --st: var(--reworked); }
.wfg-racial-icon { display: block; width: var(--icon); height: var(--icon); background: var(--panel-2); box-shadow: 0 0 0 1px var(--edge), 0 0 0 2px var(--st); }
.wfg-racial[data-state] .wfg-racial-icon { box-shadow: 0 0 0 1px var(--edge), 0 0 0 3px var(--st); }
.wfg-racial-body { min-width: 0; }
.wfg-racial-body p { margin: 0; }
.wfg-racial-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; }
.wfg-racial-head b { font-weight: 600; color: var(--ink); }
.wfg-racial-kind { font: 400 .68rem/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.wfg-racial-body .wfg-racial-classic { margin-top: .2rem; font-size: .82rem; color: var(--ink-3); }
/* A dated change sits on a 2px edge; a template can color it (the home board uses the
   faction color) through --wfg-change-edge. */
.wfg-racial-body .wfg-racial-change { margin-top: .3rem; padding-left: .6rem; border-left: 2px solid var(--wfg-change-edge, var(--line-control)); font-size: .8rem; line-height: 1.45; color: var(--ink-2); }
.wfg-racial-change .wfg-evidence { vertical-align: .05em; }
/* The state word beside the ring (New in Forever, Reworked, Same as Classic): never color
   alone. Source links in the Classic and dated lines get a 28px hit area. */
.wfg-racial-head .wfg-state { align-self: center; }
.wfg-racial-source, .wfg-racial-change a { display: inline-block; padding-block: .35rem; margin-block: -.35rem; color: var(--ink-2); text-decoration-color: var(--line-control); }
.wfg-racial-source:hover, .wfg-racial-change a:hover { color: var(--ink); }