/* Texto das habilidades com cor (v0.143, ui/rich-text.js). Uma cor por tipo de efeito, em tom suave para não brigar com as cores de raridade.
   Os tokens ficam aqui para a regra de cor das habilidades ter um só dono; os termos e o glossário moram em ui/glossary.js. */
:root {
  --hab-dano: #FF9A62;
  --hab-dot: #FF6F6F;
  --hab-lentidao: #62C8F0;
  --hab-forte: #B794F6;
  --hab-debuff: #F27BB0;
  --hab-buff: #7FD98A;
  --hab-invocacao: #CFE05A;
  --hab-area: #8FA8FF;
  --hab-renda: #F2C94C;
  --hab-vida: #46D6B0;
  --hab-nome: #FFFFFF;
  --hab-tempo: var(--text);
}

.hab { font-weight: 600; }
.hab-d { color: var(--hab-dano); }
.hab-dot { color: var(--hab-dot); }
.hab-slow { color: var(--hab-lentidao); }
.hab-ctrl { color: var(--hab-forte); }
.hab-debuff { color: var(--hab-debuff); }
.hab-buff { color: var(--hab-buff); }
.hab-sum { color: var(--hab-invocacao); }
.hab-area { color: var(--hab-area); }
.hab-yen { color: var(--hab-renda); }
.hab-hp { color: var(--hab-vida); }
.hab-key { color: var(--hab-nome); }
.hab-t { color: var(--hab-tempo); }

/* Fichas da linha Habilidade (área, Lentidão, renda, Buff), sempre numa linha própria. */
.ability-chips {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-13);
  line-height: 1.5;
}

/* Selo do tipo ao lado do nome da mecânica. */
.mech-kind {
  display: inline-block;
  margin-left: var(--s-2);
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
  vertical-align: 1px;
}

/* Glossário recolhível no fim da lista de passivas. */
.hab-glossary {
  margin-top: var(--s-2);
  font-size: var(--fs-13);
  color: var(--text-2);
}

.hab-glossary > summary {
  min-height: 24px;
  cursor: pointer;
  font-weight: 600;
  color: var(--text-2);
}

.hab-glossary-list {
  margin-top: var(--s-2);
}

@media (max-width: 600px), (pointer: coarse) {
  .hab-glossary > summary { padding-block: 8px; }
}