/* ════════════════════════════════════════════════════════════════════════
   M35 — TALENT / BUILD DISPLAY
   Inherits M08 card chrome (class-color bar, panel-1 bg, shadow-2).
   All tokens from _tokens.css. NO :root{} block.
   Brand gold: var(--wgf-gold-primary) / var(--wgf-gold-primary). NEVER var(--wgf-gold-primary) / 244,196,92.
   Green/red NEVER used for chrome — market direction only.
   Class color (--ch-class-color): identity axis only (bar, active tab, key talents).
   ════════════════════════════════════════════════════════════════════════ */

/* Card shell — M08 chrome pattern */
.talent{
  background:var(--wgf-panel-1);
  border:1px solid var(--wgf-border-neutral);
  border-radius:var(--radius-hero);
  overflow:hidden;
  box-shadow:var(--shadow-2);
  position:relative;
}
/* Thin class-color bar — identity axis */
.talent::before{
  content:'';
  display:block;
  height:3px;
  background:var(--ch-class-color, var(--wgf-gold-accent));
}

/* Card header: title + spec tabs */
.talent__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--space-2);
  padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--wgf-border-neutral);
}
.talent__header-title{
  font-family:var(--font-display);
  font-size:var(--text-sm);
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--wgf-muted);
  margin:0;
  font-weight:600;
}

/* Spec toggle tabs */
.talent__spec-tabs{
  display:flex;
  gap:var(--space-1);
  list-style:none;
  margin:0;
  padding:0;
}
.talent__spec-tab{
  font-family:var(--font-display);
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:var(--space-1) var(--space-2);
  border-radius:var(--radius-pill);
  border:1px solid var(--wgf-border-neutral);
  background:var(--wgf-panel-3);
  color:var(--wgf-muted);
  cursor:pointer;
  white-space:nowrap;
}
/* Active spec tab: class-color as identity axis */
.talent__spec-tab--active{
  background:color-mix(in srgb, var(--ch-class-color, var(--wgf-gold-accent)) 18%, var(--wgf-panel-3));
  border-color:color-mix(in srgb, var(--ch-class-color, var(--wgf-gold-accent)) 50%, transparent);
  color:var(--ch-class-color, var(--wgf-gold-primary));
}
@media(prefers-reduced-motion:no-preference){
  .talent__spec-tab{
    transition:background var(--motion-fast) var(--ease-standard),
               border-color var(--motion-fast) var(--ease-standard),
               color var(--motion-fast) var(--ease-standard);
  }
}

/* Body */
.talent__body{
  padding:var(--space-3) var(--space-4);
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}

/* Sub-heading for talent groups */
.talent__group-label{
  font-family:var(--font-display);
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--wgf-muted);
  margin:0 0 var(--space-2);
}

/* Talent list */
.talent__list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:var(--space-2);
  margin:0;
  padding:0;
  list-style:none;
}

/* Single talent row */
.talent-node{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-2);
  border-radius:var(--radius-control);
  border:1px solid transparent;
  position:relative;
}
@media(prefers-reduced-motion:no-preference){
  .talent-node{
    transition:background var(--motion-fast) var(--ease-standard),
               border-color var(--motion-fast) var(--ease-standard);
  }
}
.talent-node:hover{
  background:var(--wgf-panel-2);
  border-color:var(--wgf-border-neutral);
}

/* Talent icon — neutral square; no quality ring (talents aren't items) */
.talent-node__icon{
  flex:0 0 auto;
  width:36px;
  height:36px;
  border-radius:6px;
  object-fit:cover;
  display:block;
  background:var(--wgf-panel-3);
  border:1px solid var(--wgf-border-neutral);
}
/* Class-color glow on key/notable talents */
.talent-node__icon--key{
  border-color:color-mix(in srgb, var(--ch-class-color, var(--wgf-gold-accent)) 60%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--ch-class-color, var(--wgf-gold-accent)) 28%, transparent);
}
/* Placeholder for talents without a datamined icon */
.talent-node__icon--placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  color:var(--wgf-muted);
}

/* Talent info */
.talent-node__info{
  flex:1 1 auto;
  min-width:0;
}
.talent-node__name{
  font-family:var(--font-ui);
  font-size:var(--text-sm);
  color:var(--wgf-text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.3;
  display:block;
}
/* Key talent name picks up class color */
.talent-node__name--key{
  color:var(--ch-class-color, var(--wgf-gold-primary));
  font-weight:600;
}
.talent-node__rank{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--text-xs);
  color:var(--wgf-muted);
}

/* ── Loadout / import string ── */
.talent__loadout{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  padding:var(--space-3);
  background:var(--wgf-panel-2);
  border:1px solid var(--wgf-border-neutral);
  border-radius:var(--radius-control);
}
.talent__loadout-label{
  font-family:var(--font-display);
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--wgf-muted);
  margin:0;
}
.talent__loadout-string{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--wgf-text);
  word-break:break-all;
  background:var(--wgf-panel-3);
  padding:var(--space-2);
  border-radius:6px;
  border:1px solid var(--wgf-border-neutral-soft);
  cursor:text;
  user-select:all;
  line-height:1.5;
}
/* Copy button + "Open in calculator" deep-link share one action row */
.talent__loadout-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  align-items:center;
}
.talent__loadout-copy,
.talent__loadout-calc{
  font-family:var(--font-display);
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:var(--space-1) var(--space-2);
  border-radius:var(--radius-pill);
  border:1px solid var(--wgf-border);
  background:color-mix(in srgb, var(--ch-class-color, var(--wgf-gold-accent)) 12%, var(--wgf-panel-3));
  color:var(--ch-class-color, var(--wgf-gold-primary));
  cursor:pointer;
}
/* The calculator link reads as a secondary action next to the primary copy button */
.talent__loadout-calc{
  text-decoration:none;
  background:transparent;
}
@media(prefers-reduced-motion:no-preference){
  .talent__loadout-copy,
  .talent__loadout-calc{
    transition:background var(--motion-fast) var(--ease-standard),
               border-color var(--motion-fast) var(--ease-standard);
  }
  .talent__loadout-copy:hover,
  .talent__loadout-calc:hover{
    background:color-mix(in srgb, var(--ch-class-color, var(--wgf-gold-accent)) 22%, var(--wgf-panel-3));
    border-color:var(--wgf-border-strong);
  }
}

/* ── Footer freshness ── */
.talent__footer{
  padding:var(--space-2) var(--space-4);
  border-top:1px solid var(--wgf-border-neutral);
  display:flex;
  align-items:center;
  gap:var(--space-3);
  flex-wrap:wrap;
}

/* ── Narrow screen ── */
@media(max-width:560px){
  .talent__list{ grid-template-columns:1fr; }
  .talent__spec-tabs{ flex-wrap:wrap; }
  .talent__header{ flex-direction:column; align-items:flex-start; }
}