/* wgf-talent-hub-depth.css - the two tables under the /talents/ hub grid ("Specializations in
   the game's words", "Hero talent trees"). Producer: talent_hub_depth_render.py. The frames
   are the kit .wgf-window (wgf-chrome.css); this sheet only sets the tables. Tokens only,
   squared, no green chrome. */

.wgf-tthx { margin: var(--space-4, 1.5rem) 0 0; }
.wgf-tthx-h { margin: 0; font-size: 1rem; color: var(--wgf-gold); font-weight: 600; }
.wgf-tthx-lede { margin: 0 0 .8rem; max-width: 80ch; color: var(--wgf-text); font-size: .92rem;
  line-height: 1.6; }
.wgf-tthx-scroll { overflow-x: auto; }
.wgf-tthx-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .9rem; }
.wgf-tthx-table th, .wgf-tthx-table td { text-align: left; vertical-align: top; padding: .5rem .6rem;
  border-bottom: 1px solid var(--wgf-border-neutral); color: var(--wgf-text); }
.wgf-tthx-table thead th { color: var(--wgf-gold); font-size: .74rem; text-transform: uppercase;
  letter-spacing: .04em; border-bottom: 1px solid var(--wgf-metal); }
.wgf-tthx-table tbody th { font-weight: 600; white-space: nowrap; }
.wgf-tthx-table a { color: var(--wgf-gold-link); }
.wgf-tthx-spec { display: inline-flex; align-items: center; gap: .45rem; }
.wgf-tthx-ico { display: block; flex: 0 0 auto; border: 1px solid var(--wgf-metal); }
.wgf-tthx-desc { display: block; line-height: 1.55; }
.wgf-tthx-sub { display: block; margin-top: .25rem; color: var(--wgf-muted); font-size: .84rem; }