/* M52 — Relevance / Classification Tag
   Single-homed canonical CSS (one file, one concern).
   Tokens: var(--wgf-*) — never :root here.
   Color mapping:
     current   -> gold (brand accent — the only class that earns it)
     meta      -> gold-muted (notable but secondary)
     transmog/collector/profession -> neutral panel (informational)
     old       -> muted
     dead      -> most muted, clearly de-emphasized
     unknown   -> muted + dashed border (honest: we don't know) */

/* ── tooltip wrapper — position:relative anchor ── */
.rt-wrap{
  position:relative;
  display:inline-block;
}

/* ── the pill itself ── */
.rt{
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  padding:3px 10px 3px 8px;
  border-radius:var(--radius-pill);
  border:1px solid;
  font-family:var(--font-display);
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:.07em;
  line-height:1.3;
  white-space:nowrap;
  cursor:default;
  user-select:none;
  transition:
    opacity var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}
@media(prefers-reduced-motion:reduce){
  .rt{transition:none;}
}
.rt:focus{outline:none;}
.rt:focus-visible{box-shadow:var(--focus-ring);}

/* ── glyph slot ── */
.rt__glyph{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:12px;
  height:12px;
  flex:0 0 auto;
  line-height:1;
}
.rt__glyph svg{width:12px;height:12px;display:block;}

/* ── class modifiers ── */

/* current — gold border + gold text (only class that earns brand accent) */
.rt--current{
  background:rgba(240,192,64,.10);
  border-color:var(--wgf-border-strong);
  color:var(--wgf-gold-primary);
}
.rt--current:hover,.rt--current:focus-visible{
  background:rgba(240,192,64,.18);
  border-color:var(--wgf-gold-primary);
}

/* meta — gold-muted (notable, not as prominent as current) */
.rt--meta{
  background:rgba(185,166,107,.08);
  border-color:rgba(185,166,107,.35);
  color:var(--wgf-gold-muted);
}
.rt--meta:hover,.rt--meta:focus-visible{
  background:rgba(185,166,107,.14);
  border-color:var(--wgf-gold-muted);
}

/* transmog — neutral, informational */
.rt--transmog{
  background:var(--wgf-panel-2);
  border-color:var(--wgf-border-neutral);
  color:var(--wgf-text);
}
.rt--transmog:hover,.rt--transmog:focus-visible{
  background:var(--wgf-panel-3);
  border-color:rgba(236,231,221,.28);
}

/* collector — neutral, informational */
.rt--collector{
  background:var(--wgf-panel-2);
  border-color:var(--wgf-border-neutral);
  color:var(--wgf-text);
}
.rt--collector:hover,.rt--collector:focus-visible{
  background:var(--wgf-panel-3);
  border-color:rgba(236,231,221,.28);
}

/* profession — neutral, informational */
.rt--profession{
  background:var(--wgf-panel-2);
  border-color:var(--wgf-border-neutral);
  color:var(--wgf-text);
}
.rt--profession:hover,.rt--profession:focus-visible{
  background:var(--wgf-panel-3);
  border-color:rgba(236,231,221,.28);
}

/* old — muted */
.rt--old{
  background:var(--wgf-panel-1);
  border-color:var(--wgf-border-neutral-soft);
  color:var(--wgf-muted);
}
.rt--old:hover,.rt--old:focus-visible{
  background:var(--wgf-panel-2);
  border-color:var(--wgf-border-neutral);
}

/* dead — most muted, clearly de-emphasized */
.rt--dead{
  background:var(--wgf-panel-1);
  border-color:var(--wgf-border-neutral-soft);
  color:#69625a;
  opacity:.85;
}
.rt--dead:hover,.rt--dead:focus-visible{
  opacity:1;
  border-color:var(--wgf-border-neutral);
  color:var(--wgf-muted);
}

/* unknown — muted + dashed border (honest: we don't know) */
.rt--unknown{
  background:var(--wgf-panel-1);
  border-color:var(--wgf-border-neutral-soft);
  border-style:dashed;
  color:var(--wgf-muted);
}
.rt--unknown:hover,.rt--unknown:focus-visible{
  background:var(--wgf-panel-2);
  border-color:var(--wgf-border-neutral);
}

/* ── compact variant (table-row / card context) ── */
.rt--compact{
  padding:1px 7px 1px 6px;
  font-size:.68rem;
  letter-spacing:.05em;
}
.rt--compact .rt__glyph{width:10px;height:10px;}
.rt--compact .rt__glyph svg{width:10px;height:10px;}

/* ── tag group (multiple tags for one entity) ── */
.rt-group{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-1);
  align-items:center;
}

/* ── dark tooltip ── */
.rt-tip{
  position:absolute;
  bottom:calc(100% + var(--space-1));
  left:50%;
  transform:translateX(-50%);
  z-index:200;
  background:#0a0805;
  border:1px solid var(--wgf-border-neutral);
  border-radius:var(--radius-control);
  box-shadow:var(--shadow-2);
  padding:var(--space-2) var(--space-3);
  max-width:260px;
  min-width:180px;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:
    opacity var(--motion-fast) var(--ease-standard),
    visibility 0s linear var(--motion-fast);
}
@media(prefers-reduced-motion:reduce){
  .rt-tip{transition:none;}
}
/* caret */
.rt-tip::after{
  content:'';
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  border:5px solid transparent;
  border-top-color:#0a0805;
}
.rt-tip::before{
  content:'';
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%) translateY(-1px);
  border:6px solid transparent;
  border-top-color:var(--wgf-border-neutral);
}
.rt-tip__class{
  font-family:var(--font-display);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--wgf-muted);
  margin:0 0 var(--space-1);
}
.rt-tip__basis{
  font-family:var(--font-ui);
  font-size:var(--text-sm);
  color:var(--wgf-text);
  line-height:1.5;
  margin:0;
}

/* show tooltip on hover/focus anywhere in the wrapper */
.rt-wrap:hover .rt-tip,
.rt-wrap:focus-within .rt-tip{
  opacity:1;
  visibility:visible;
  transition:
    opacity var(--motion-fast) var(--ease-standard),
    visibility 0s linear 0s;
}
@media(prefers-reduced-motion:reduce){
  .rt-wrap:hover .rt-tip,
  .rt-wrap:focus-within .rt-tip{transition:none;}
}